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

283

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

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

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

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

Райан Дювал
источник
3
На вкладке «Сценарии» есть строка поиска, которая отображает текущий файл, и вы можете посмотреть содержимое функции, распечатав ее. Но я теперь любопытен, если есть способ сделать более общий поиск, как вы хотите ...
hugomg
3
С помощью инструментов разработчика Google Chrome, в «Источниках» нажмите -> в правом окне, у вас есть возможность установить «Точки останова события».
В моем случае переменная была установлена ​​на неизвестную функцию. Я сделал myvar.toString (), и он напечатал: «function Object () {[native code]}», и это все, что мне нужно было знать.
Кольцо

Ответы:

367

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

plesiv
источник
8
Вот о чем я говорю! Я понятия не имел, что панель вообще существует - а как ты?
Райан ДюВаль
22
cmd + опция + F на OSX
Стигглер
2
Это только один способ определить функцию с именем foo. Есть и другие. Что если наша функция, например bar['foo']? (На этот вопрос нет хорошего ответа, насколько я знаю - это, по сути, «не пишите запутанный код»)
Стивен Лу
1
Я не смог найти «определение функции», используя выбранный ответ. Я искал в Google и не смог найти никакой помощи. (С использованием Chrome версии 41.0.2272.118 м)
Web_Developer
7
И тогда вам не удается найти объявления функций, динамически сгенерированные выражения функций и анонимные (безымянные) функции. Я бы предпочел что-то вроде Firefox: щелкните ссылку на функцию на панели часов -> Перейти к ссылке на функцию.
Фагнер Брэк
78

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

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

 Инструменты разработчика Chrome> Консоль> Показать определение функции

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

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

Дмитрий Пашкевич
источник
1
Существует ли ярлык или функция, которая позволяет осуществлять поиск по ссылке на функцию? как "> осмотреть (document.body)". Пока что мне нужно d> tmp = {a: myFunc}; > tmp, за которым следует «Показать определение функции»
Деннис C
16
Я думаю, что вы можете сделатьdir(myFunc)
Дмитрий Пашкевич
dir (myFunc) намного лучше, но все равно нужно два клика и мышь
Деннис C
1
О, вы имеете в виду, если вы можете сделать это полностью с клавиатуры? Что то типа findDefinition(myFunc)? AFAIK, которого еще нет ...
Дмитрий Пашкевич
Если у вас нет объекта, содержащего функцию, вы можете создать объект вокруг него, и он все равно будет работать. Например, в консоли типа:, ({1:somefunction})затем щелкните правой кнопкой мыши функцию внутри печатного объекта.
Один защитник
47

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

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

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

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

Joar
источник
1
Это не работает для меня (даже с функциями, определенными на странице):> toggle_search ReferenceError: toggle_search не определено
Ryan DuVal
Ааа, см. Мое редактирование. В противном случае, использование функции поиска поможет вам. Chrome devtools - это не IDE, это отладчик :)
joar
1
Это работает для нахождения текущего активного определения функции.
Патрик
1
Фактически это означает, что функция была определена в текущей области видимости.
Джонатан
1
@aroth По крайней мере в Chrome 45 это снова работает. Я знаю, что что-то изменилось где-то между, когда это было опубликовано и сейчас. В конце концов, похоже, снова работает.
Джоар
32

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

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

ctrl+ shift+O

или в OS X:

+ shift+O

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

arthur.sw
источник
1
хорошо, что это, кажется, делает не «перейти к определению» произвольного вызова функции, а «покажет вам все имена функций в текущем файле и позволит вам перейти к ним» - что тоже довольно полезно.
Скотт Уивер
Это именно то, что я искал, функция похожа на Firefox! В Firefox вы можете просто открыть инструменты разработчика, нажать Ctrl + f, и он будет искать функцию JS на всех панелях (HTML / CSS / Javascript / и т.д.). Это делает это, в отличие от функций регулярных выражений, упомянутых в других ответах.
javaBean007
@ Рэнди, на какой версии Chrome? Какая ОС? Я использую Chrome версии 59.0.3071.115 на OS X, и он отлично работает.
arthur.sw
@ arthur.sw Извините, я не понял, что вы должны быть в источниках, чтобы это работало. Я ожидал, что это будет работать и в консоли.
Рэнди
Для меня открывается меню Chrome, если я нажимаю эту комбинацию клавиш в консоли разработчика.
Черное
19

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

Разван Флавий Панда
источник
17

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

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

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

    • Fire Fox

      functionName.toSource()
    • Хром

      functionName
Дипак Диксит
источник
функция, которую я ищу - это stop (), и она используется как onmouseover = "this.stop ();" когда я делаю то, что вы говорите, он возвращает: stop () {[native code]} И что теперь делать?
Тарик
functionName.toSource()также работает на последних версиях Chrome.
Сурав Гош
1
@Tarik Посмотрите онлайн-документацию для встроенного stop.
Фонд Моники иск
@QPaysTaxes Спасибо, теперь я понимаю, что когда он возвращает: stop () {[native code]}, то есть собственный код означает, что это не приватная функция, это внутренняя функция, и я должен искать онлайн документацию по этой функции.
Тарик
6

в консоли Chrome:

debug(MyFunction)
MyFunction()
Игорь Крупицкий
источник
1
Мне нравится это. Примечательно: сделайте еще раз, undebug(MyFunction)чтобы удалить
Andreas
5

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

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

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

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

введите описание изображения здесь

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

введите описание изображения здесь

subhro
источник
0

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

введите описание изображения здесь

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

введите описание изображения здесь

Абдолла
источник