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

Ответ 1

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

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

Ответ 2

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

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

В принципе просто начните запись:

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

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

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

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

Ответ 3

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

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