Инструменты разработчика в Chrome, но одна вещь, которую они, похоже, не имеют (которую я смог найти), - это способ найти определение функции JavaScript. Это было бы очень удобно для меня, потому что я работаю над сайтом, который включает много внешних файлов JS. Конечно, grep решает эту проблему, но в браузере будет намного лучше. Я имею в виду, что браузер должен это знать, так почему бы не раскрыть это? То, что я ожидал, было что-то вроде:
- Выберите «Проверка элемента» на странице, которая выделяет строку на вкладке «Элементы».
- Щелкните правой кнопкой мыши строку и выберите «Перейти к определению функции».
- Правильный скрипт загружается во вкладку Scripts и переходит к определению функции
Прежде всего, существует ли эта функциональность, и я просто скучаю по ней?
И если этого не произойдет, я предполагаю, что это из-за WebKit, но не смог найти ничего для запросов о функциях Developer Tool или Bugzilla WebKit .
javascript
google-chrome-devtools
Райан Дювал
источник
источник
Ответы:
Допустим, мы ищем функцию с именем
foo
:foo\s*=\s*function
(поискfoo = function
с любым количеством пробелов между этими тремя токенами),Другой вариант определения функции -
function\s*foo\s*\(
дляfunction foo(
любого количества пробелов между этими тремя токенами.источник
foo
. Есть и другие. Что если наша функция, напримерbar['foo']
? (На этот вопрос нет хорошего ответа, насколько я знаю - это, по сути, «не пишите запутанный код»)Это произошло в Chrome 2012-08-26 Не уверен насчет точной версии, я заметил это в Chrome 24.
Скриншот стоит миллион слов:
Я проверяю объект с помощью методов в консоли. Нажатие на «Показать определение функции» приведет меня к месту в исходном коде, где определена функция. Или я могу просто навести курсор на
function () {
слово, чтобы увидеть тело функции во всплывающей подсказке. Вы можете легко проверить всю цепочку прототипов, как это! CDT определенно рок !!!Надеюсь, вы все найдете это полезным!
источник
dir(myFunc)
findDefinition(myFunc)
? AFAIK, которого еще нет ...({1:somefunction})
затем щелкните правой кнопкой мыши функцию внутри печатного объекта.Вы можете напечатать функцию, оценив ее имя в консоли, например
это не будет работать для встроенных функций, они будут отображаться только
[native code]
вместо исходного кода.РЕДАКТИРОВАТЬ : это означает, что функция была определена в текущей области.
источник
Обновление 2016 : в версии Chrome 51.0.2704.103
Существует
Go to member
ярлык (указан вsettings > shortcut > Text Editor
). Откройте файл, содержащий вашу функцию (наsources
панели DevTools) и нажмите:или в OS X:
Это позволяет составить список и достичь членов текущего файла.
источник
Другой способ перейти к местоположению определения функции - это открыть в отладчике место, где вы можете получить доступ к функции и ввести полное имя функции в консоли. Это распечатает определение функции в консоли и даст ссылку, которая при щелчке открывает местоположение сценария, в котором определена функция.
источник
Разные браузеры делают это по-разному.
Сначала откройте окно консоли, щелкнув правой кнопкой мыши на странице и выбрав «Проверить элемент», или нажав F12.
В консоли введите ...
Fire Fox
Хром
источник
functionName.toSource()
также работает на последних версиях Chrome.stop
.в консоли Chrome:
источник
undebug(MyFunction)
чтобы удалитьЯ считаю, что самый быстрый способ найти глобальную функцию просто:
источник
В Google Chrome, инструмент проверки элементов вы можете просмотреть любое определение функции Javascript.
источник
Если вы уже отлаживаете, вы можете навести курсор на функцию, и всплывающая подсказка позволит вам перейти непосредственно к определению функции:
Дальнейшее чтение :
источник
У меня была похожая проблема с поиском источника метода объекта. Имя объекта было
myTree
и его метод былload
. Я поставил точку останова на строке, где был вызван метод. После перезагрузки страницы выполнение остановилось на этом этапе. Затем в консоли DevTools я набрал объект вместе с именем метода, т.е.myTree.load
и нажал Enter. Определение метода было напечатано на консоли:Также, щелкнув правой кнопкой мыши по определению, вы можете перейти к его определению в исходном коде:
источник