Знайдіть визначення функції JavaScript у Chrome

Інструменти для розробників Chrome гойдаються, але одне, що, здається, не має (що я міг би знайти), це спосіб знайти визначення функції JavaScript. Це було б дуже зручно для мене, оскільки я працюю на сайті, який включає багато зовнішніх файлів JS. Звичайно, греп вирішує це, але в браузері було б набагато краще. Я маю на увазі, браузер повинен це знати, то чому б не розкрити його? Я очікував щось таке:

• На сторінці виберіть "Перевірити елемент", на якому відображається рядок на вкладці "Елементи"
• Клацніть рядок правою кнопкою миші та виберіть "Перейти до визначення функції"
• Правильний скрипт завантажується на вкладку Сценарії та переходить до визначення функції

По-перше, чи існує ця функціональність, і я її просто відсутній?

Якщо це не так, я здогадуюсь, що це походило б із WebKit, але нічого не вдалося знайти для запитів на функції інструмента розробника або Bugzilla WebKit .

Скажімо, ми шукаємо функцію з назвою 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(будь-якої кількості пробілів між цими трьома лексемами.

Цей приземлився в Chrome в 2012-08-26. Не знаючи точної версії, я помітив це в Chrome 24.

Скріншот вартує мільйона слів:

Я оглядаю об’єкт методами в консолі. Клацнувши по кнопці "Показати визначення функції", відводить мене до місця у вихідному коді, де визначена функція. Або я можу просто навести курсор на function () {слово, щоб побачити функціональне тіло в підказці. Ви можете легко оглянути всю прототипну ланцюжок, як це! CDT напевно рок !!!

Сподіваюсь, вам всім це стане в нагоді!

Ви можете роздрукувати функцію, оцінивши її назву в консолі, як так

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

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

EDIT : це означає, що функція була визначена в поточному діапазоні.

Оновлення 2016 року : у версії Chrome 51.0.2704.103

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

ctrl+ shift+O

або в OS X:

⌘+ shift+O

Це дозволяє перелічити та отримати доступ до членів поточного файлу.

Іншим способом навігації до місця визначення функції буде пробивання налагоджувача десь ви можете отримати доступ до функції та ввести повнофункціональне ім'я в консолі. Це надрукує визначення функції в консолі та дасть посилання, яке при натисканні відкриє місце скрипту, де визначена функція.

Різні браузери роблять це по-різному.

1. Спочатку відкрийте вікно консолі, клацнувши правою кнопкою миші на сторінці та вибравши "Перевірити елемент", або натиснувши його F12.

2. На консолі введіть ...

   • Firefox

     functionName.toSource()

   • Хром

     functionName

в консолі Chrome:

debug(MyFunction)
MyFunction()

Я вважаю, що найшвидший спосіб знайти глобальну функцію - це просто:

1. Виберіть вкладку " Джерела" .
2. У області перегляду натисніть + та введіть вікно
3. Ваші глобальні посилання на функції перераховані спочатку за алфавітом.
4. Клацніть правою кнопкою миші функцію, яка вас цікавить.
5. У спливаючому меню виберіть Показати визначення функції .
6. Панель вихідного коду переходить на визначення цієї функції.

У інструменті Google Chrome, Інспектування елементів ви можете переглянути будь-яке визначення функції Javascript.

1. Перейдіть на вкладку Джерела. Потім виберіть індексну сторінку. Пошук функції.

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

Якщо ви вже налагоджуєте, ви можете навести курсор на функцію, і підказка дозволить вам безпосередньо переходити до визначення функції:

Подальше читання :

• Chrome DevTools> Довідка про налагодження JavaScript

У мене була подібна проблема з пошуком джерела методу об'єкта. Назва об'єкта була myTreeі його метод load. Я ставлю точку розриву на лінії, що називається методом. Перезавантаживши сторінку, виконання зупинилося в цьому пункті. Потім на консолі DevTools я набрав об'єкт разом із назвою методу, тобто myTree.loadнатиснув Enter. Визначення методу було надруковано на консолі:

Також, клацнувши правою кнопкою миші на визначення, ви можете перейти до його визначення у вихідному коді: