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

Инструменты разработчика в Chrome, но одна вещь, которую они, похоже, не имеют (которую я смог найти), - это способ найти определение функции JavaScript. Это было бы очень удобно для меня, потому что я работаю над сайтом, который включает много внешних файлов JS. Конечно, grep решает эту проблему, но в браузере будет намного лучше. Я имею в виду, что браузер должен это знать, так почему бы не раскрыть это? То, что я ожидал, было что-то вроде:

• Выберите «Проверка элемента» на странице, которая выделяет строку на вкладке «Элементы».
• Щелкните правой кнопкой мыши строку и выберите «Перейти к определению функции».
• Правильный скрипт загружается во вкладку Scripts и переходит к определению функции

Прежде всего, существует ли эта функциональность, и я просто скучаю по ней?

И если этого не произойдет, я предполагаю, что это из-за WebKit, но не смог найти ничего для запросов о функциях Developer Tool или Bugzilla WebKit .

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

1. (открыть Chrome dev-tools),
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 2012-08-26 Не уверен насчет точной версии, я заметил это в 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

или в OS X:

⌘+ shift+O

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

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

Разные браузеры делают это по-разному.

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

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

   • Fire Fox

     functionName.toSource()

   • Хром

     functionName

в консоли Chrome:

debug(MyFunction)
MyFunction()

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

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

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

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

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

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

Дальнейшее чтение :

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

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

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