Есть ли способ увидеть, какие функции Javascript (названия функций) выполняются в реальном времени в Chrome Inspector? - PullRequest
13 голосов
/ 20 января 2012

Например, представьте, что есть код Javascript, который будет выполняться someFunction() при нажатии кнопки, и я нажимаю эту кнопку.Интересно, есть ли способ увидеть, что someFunction() был только что выполнен.Есть ли способ узнать, какие функции выполняются в Chrome в режиме реального времени?

Если это вкладка «Профили» в инспекторе, которая делает трюк, как именно вы скажете, какие функции запускаются в реальном времени с этим?

РЕДАКТИРОВАТЬ 21.01.2012 12: 36p Pacific: Из комментария Брайана Никеля ниже, вкладка Временная шкала в Инспекторе - это способ увидеть, что происходит в реальном времени, но как вы видитеимена исполняемых функций на временной шкале?

Ответы [ 2 ]

12 голосов
/ 22 января 2012

Для достижения этой цели можно использовать инструмент разработчика Timeline и Scripts.

  • Откройте панель инструментов разработчика и нажмите «Запись» под временной шкалой, чтобы начать отслеживание действий.
  • Запустите интересующее вас событие (например, в вашем примере нажмите на кнопку), затем остановите запись (или продолжите запись, но не забывайте о количестве данных, которые вы собираете).
  • Обратите внимание на записи, зарегистрированные на панели «Таймлайн». Найдите соответствующее событие и нажмите стрелку twistie слева от временной шкалы для этого события. Это откроет вызовы функций, связанные с этим событием.
  • Нажмите на ссылку справа от вызова функции, чтобы увидеть соответствующий JavaScript. (Вы запрашиваете имя функции, но имейте в виду, что событие может быть связано с анонимной функцией, поэтому не всегда доступно имя.)
  • Если вы хотите пошагово пройти через сам обработчик события, вставьте точку останова в строку после объявления обработчика (при условии, что объявление обработчика события превышает одну строку). Или разверните точки прерывания прослушивателя событий на панели «Сценарии» и отметьте соответствующий тип события (как указано на панели «Таймлайн» для соответствующего события). Обратите внимание, что этот подход будет нарушаться при каждом экземпляре этого события вместо единственного вызова, который вас интересует.

Если у вас возникли проблемы с минимизированным JavaScript и вставкой точек останова (поскольку каждая строка очень длинная), вот совет: откройте файл минимизированного скрипта на панели «Сценарии» в раскрывающемся списке, затем нажмите {} . Это включит Pretty Print, расширив минимизированный код во что-то более читаемое, добавив пробел. Это позволяет вставлять точки останова более детально. Обратите внимание, что если вы теперь вернетесь к панели «Таймлайн», ссылки на сценарии (например, jquery.min.js:3) теперь будут использовать довольно напечатанные номера строк, а не минимизированные, без пробелов.

0 голосов
/ 20 января 2012

Есть много хороших утилит, которые вы можете использовать: console.trace();, debugger и т. Д.

...