Відстеження виконання Javascript у Chrome - як?

На веб-сайті завантажено ~ 100-200 функцій javascript. Я хочу визначити, яка функція javascript виконується, коли я натискаю той чи інший елемент у Google Chrome. Як я можу це зробити за допомогою Інструментів веб-розробника Chrome? Дякую!

Один простий підхід - запустити Chrome Developer Tools, перейти на панель Джерела та натиснути F8(Призупинити виконання). Це призведе до порушення першого виконаного оператора JavaScript.

Інший підхід полягає в тому, щоб встановити точку зупинки прослуховувача подій для миші або клацнути: на тій же панелі Джерела розгорніть «Точки зупинки прослуховувача подій» на правій бічній панелі. Розгорніть пункт «Миша» та перевірте події, на які ви хочете зламати (наприклад, «клацніть», «миша»). Потім натисніть на вашій сторінці і побачите перерву виконання JS у DevTools. Насолоджуйтесь!

Альтернатива призупиненню виконання (яке зазвичай чудово працює, але погано працює на сторінках, на яких часто виконується періодичний код)

Ви можете використовувати профайлер chrome для короткого проміжку часу. Після того, як ви закінчите запис, він покаже вам підсумок часу процесора, проведеного в будь-якій з функцій, які були виконані під час запису. Ми насправді не піклуємося про час процесора, ми просто використовували цей інструмент, тому що він покаже нам, які функції були виконані.

В основному просто почніть запис:

Примітка: у Chrome 58 та новіших версіях ця вкладка перейменована на "Пам'ять". Довідково

Потім виконайте свої дії (наприклад, натисніть кнопку на веб-сторінці або зробіть все, що призведе до виконання цікавого коду). Потім зупиніть запис і перегляньте результат:

Зверніть увагу, що я використовую режим перегляду "зверху вниз" - який показує вам стек викликів, і ви можете детально переглянути, які функції врешті-решт викликані. Наприклад, спочатку була викликана якась анонімна функція (ймовірно, в результаті setTimeout або, можливо, якийсь обробник події кліку), а потім вона викликала якийсь метод, ідентифікований за допомогою s.track.s.tякого потім викликався s_doPluginsтощо ... Важливо те, що в режимі зверху , записи в верхній частині дерева утворюють початок стека викликів, і тому вони , як правило , функції , зареєстрованої деякої функції таймера ( setTimeout, setInterval, requestAnimationFrameі т.д. ...) або який - або обробник події ( click, mousemove, loadі т.д .. .).

Ви також можете використовувати режим перегляду "діаграми", який показує, яка функція була викликана в той час, нанесена на діаграму зліва направо. Це допоможе вам визначити, яку функцію ви справді шукаєте, оскільки ви, мабуть, відчуваєте, скільки часу виконується код під час вашого запису (наприклад, прямо посередині).

До речі - я вважаю, що більшість інших сучасних браузерів мають подібні можливості.

Я хочу визначити, яка функція javascript виконується, коли я натискаю той чи інший елемент у Google Chrome.

Зараз є чудове розширення Visual Event, яке робить саме це. Він розпізнає лише обробники подій, встановлені за допомогою популярних бібліотек js (jQuery, YUI, MooTools, Prototype, Glow) та подій DOM Level 0.