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

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

Выберите "Осмотреть элемент" со страницы, в которой выделяется строка на вкладке "Элементы"
Щелкните правой кнопкой мыши строку и выберите "Перейти к определению функции"
Корректный script загружается на вкладку "Сценарии", и он переходит к определению функции

Во-первых, существует ли эта функциональность, и я просто пропустил ее?

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

Ответы

Ответ 1

Предположим, что мы ищем функцию с именем foo:

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

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

Ответ 2

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

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

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

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

Ответ 3

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

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

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

EDIT: это означает, что функция определена в текущей области.

Ответ 4

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

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

ctrl + shift + O

или в OS X:

⌘ + shift + O

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

Ответ 5

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

Ответ 6

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

Сначала откройте окно консоли, щелкнув правой кнопкой мыши на странице и выбрав "Осмотреть элемент" или нажав F12.
В консоли введите...
- Firefox
```
functionName.toSource()
```
- Chrome
```
functionName
```

Ответ 7

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

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

Ответ 8

в консоли Chrome:

debug(MyFunction)
MyFunction()

Ответ 9

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

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

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