Отслеживание выполнения Javascript в Chrome-как?

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

3 60
javascript google-chrome debugging google-chrome-devtools

3 ответа:

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

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

73

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

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

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

chrome profiler start button

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

profiler result summary

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

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

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

20

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

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

14