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

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

  • выберите "проверить элемент" на странице, которая выделяет строка на вкладке элементы
  • щелкните правой кнопкой мыши строку "и выберите" Перейти к определению функции'
  • правильный сценарий загружается на вкладке скрипты, и он переходит к определению функции

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

и если это не так, я предполагаю, что это будет исходить от WebKit, но не смог найти ничего для Developer Tool feature requests или в WebKit это в Bugzilla.

242
google-chrome-devtools javascript

7 ответов

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

326

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

скриншот стоит миллион слов:enter image description here

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

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

69

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

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

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

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

44

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

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

ctrl + shift + O

или в OS X:

⌘ + shift + O

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

25

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

16

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

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

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

    • Firefox

      functionName.toSource()

    • Chrome

      functionName
14

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

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