Найти определение функции JavaScript в Chrome

Допустим, мы ищем функцию с именем foo:

1. (откройте инструменты разработчика Chrome),
2. Windows: ctrl + shift + F или macOS: cmd + optn + F. Это открывает окно для поиска по всем скриптам.
3. установите флажок "Регулярное выражение",
4. поиск по запросу foo\s*=\s*function (поиск по запросу foo = function с любым количеством пробелов между этими тремя токенами),
5. нажмите на возвращенный результат.

Другой вариант определения функции - function\s*foo\s*\( для function foo( с любым количеством пробелов между этими тремя токенами.

Этот приземлился в Chrome 26 августа 2012 г. Не уверен в точной версии, Я заметил это в Chrome 24.

Скриншот стоит миллиона слов:

Я проверяю объект с помощью методов в консоли. При нажатии на «Показать определение функции» я попадаю в то место в исходном коде, где определена функция. Или я могу просто навести курсор на слово function () {, чтобы увидеть тело функции во всплывающей подсказке. Вы можете легко проверить всю цепочку прототипов таким образом! CDT определенно рок !!!

Надеюсь, вы все сочтете это полезным!

Вы можете распечатать функцию, оценив ее имя в консоли, например

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

это не сработает для встроенных функций, они будут отображать только [native code] вместо исходного кода.

ИЗМЕНИТЬ: это означает, что функция была определена в текущей области.

Обновление 2016 г.: в Chrome версии 51.0.2704.103

Есть Go to member ярлык (перечислен в settings > shortcut > Text Editor). Откройте файл, содержащий вашу функцию (на панели sources DevTools), и нажмите:

ctrl + shift + O

or in OS X:

⌘ + shift + O

Это позволяет выводить список и достигать членов текущего файла.

Другой способ перейти к местоположению определения функции - это прервать работу отладчика в том месте, где вы можете получить доступ к функции, и ввести полное имя функции в консоли. Это напечатает определение функции в консоли и предоставит ссылку, которая при нажатии открывает место сценария, в котором определена функция.

В разных браузерах это делается по-разному.

1. Сначала откройте окно консоли, щелкнув страницу правой кнопкой мыши и выбрав «Проверить элемент» или нажав F12.

2. В консоли введите ...

   • Fire Fox

     functionName.toSource()
     

   • Хром

     functionName
     

в консоли Chrome:

debug(MyFunction)
MyFunction()

Я считаю, что самый быстрый способ найти глобальную функцию - это просто:

1. Выберите вкладку Источники.
2. На панели Просмотр нажмите + и введите окно.
3. Ссылки на ваши глобальные функции перечислены первыми в алфавитном порядке.
4. Щелкните правой кнопкой мыши интересующую вас функцию.
5. Во всплывающем меню выберите Показать определение функции.
6. Панель исходного кода переключится на определение этой функции.

В Google Chrome с помощью инструмента Inspect element вы можете просмотреть любое определение функции Javascript.

1. Щелкните вкладку "Источники". Затем выберите страницу индекса. Найдите функцию.

2. Выберите функцию, затем щелкните функцию правой кнопкой мыши и выберите «Оценить выделенный текст в консоли».

Если вы уже выполняете отладку, вы можете навести указатель мыши на функцию, и всплывающая подсказка позволит вам перейти непосредственно к определению функции:

Дополнительная информация:

• Chrome DevTools> Справочник по отладке JavaScript

У меня была аналогичная проблема с поиском источника метода объекта. Имя объекта было myTree, а его метод - load. Я поставил точку останова на строке, в которой был вызван метод. После перезагрузки страницы выполнение остановилось на этом этапе. Затем в консоли DevTools я ввел объект вместе с именем метода, то есть myTree.load, и нажал Enter. Определение метода было напечатано на консоли:

Также, щелкнув определение правой кнопкой мыши, вы можете перейти к его определению в исходном коде: