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

Question

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

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

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

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

Answer 1

Допустим, мы ищем функцию с именем 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( с любым количеством пробелов между этими тремя токенами.

Answer 2

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

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

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

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

Answer 3

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

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

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

РЕДАКТИРОВАТЬ : это означает, что функция была определена в текущей области.

Answer 4

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

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

ctrl + shift + O

или в OS X:

⌘ + смещение + O

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

Answer 5

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

Answer 6

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

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

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

   • Firefox

     functionName.toSource()
     

   • Chrome

     functionName
     

Answer 7

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

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

Answer 8

в консоли Chrome:

debug(MyFunction)
MyFunction()