Отслеживание выполнения Javascript в Chrome - как? - PullRequest
67 голосов
/ 03 февраля 2012

На сайте загружено ~ 100-200 функций JavaScript.Я хочу определить, какая функция JavaScript выполняется, когда я нажимаю тот или иной элемент в Google Chrome.Как я могу сделать это с помощью Chrome Web Developer Tools?Спасибо!

Ответы [ 3 ]

76 голосов
/ 03 февраля 2012

Один из простых подходов - запустить Chrome Developer Tools, переключиться на панель «Источники» и нажать F8 («Приостановить выполнение»).Это сломает первый выполненный оператор JavaScript.

Другой подход заключается в установке точки останова прослушивателя событий для mousedown или щелчка: на той же панели «Источники» разверните «Точки останова прослушивателя событий» в правой боковой панели.Разверните элемент «Мышь» и проверьте события, на которые вы хотите разбить (например, «щелчок», «mousedown»).Затем нажмите на своей странице и увидите разрыв выполнения JS в DevTools.Наслаждайтесь!

24 голосов
/ 23 ноября 2015

Альтернатива приостановке выполнения (которая обычно отлично работает, но плохо работает на страницах, которые часто выполняют периодический код)

Вы можете использовать Chrome Profiler для записи в течение короткого периода времени. После того, как вы закончите запись, он покажет вам сводку времени процессора, потраченного на любую из функций, которые были выполнены во время записи. Мы не особо заботимся о времени процессора, просто использовали этот инструмент, потому что он покажет нам, какие функции были выполнены.

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

chrome profiler start button

Затем выполните свое действие (например, нажмите кнопку на веб-странице или выполните все, что приведет к выполнению интересного кода). Затем остановите запись и просмотрите результат:

profiler result summary

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

Вы также можете использовать режим просмотра «Диаграмма», который показывает, какая функция была вызвана и в какое время, на графике слева направо. Это поможет вам определить, какую функцию вы действительно ищете, потому что у вас, вероятно, есть представление о времени выполнения кода внутри вашей записи (например, прямо посередине).

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

14 голосов
/ 17 апреля 2013

Я хочу определить, какая функция JavaScript выполняется, когда я нажимаю на тот или иной элемент в Google Chrome.

Теперь есть большое расширение под названием Visual Event , которое делает именно это. Он распознает только обработчики событий, установленные через популярные библиотеки js (jQuery, YUI, MooTools, Prototype, Glow) и события DOM уровня 0.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...