Как просмотреть события, запущенные на элементе в Chrome DevTools?

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

Как это сделать с помощью Chrome Web Developer?

459
google-chrome-devtools javascript

5 ответов

  • нажмите F12 чтобы открыть Dev Tools
  • перейдите на вкладку источник
  • С правой стороны прокрутите вниз до "точки останова прослушивателя событий" и разверните tree
  • нажмите на события, которые вы хотите слушать.
  • взаимодействуйте с целевым элементом, если они срабатывают, вы получите точку останова в отладчике

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

727

можно использовать monitorEvents)

теперь, когда вы перемещаете мышь над этим элементом, фокусируете или щелкаете по нему, имя запущенного события будет отображаться с его данными.

чтобы остановить получение этих данных, просто напишите это консоль:

unmonitorEvents()

- это только последний элемент DOM, выбранный инструментами разработчика Chrome. Вы можете передать туда любой другой объект DOM (например, результат getElementById или querySelector).

вы также можете указать событие " тип " в качестве второго параметра для сужения отслеживаемых событий до некоторого предопределенного набора. Например:

monitorEvents(document.body, 'mouse')

список доступных типов составляет здесь.

я сделал небольшой gif, который иллюстрирует, как эта функция работает:

usage of monitorEvents function

632

Визуальное Событие - это небольшой букмарклет, который можно использовать для просмотра обработчиков событий элемента. На онлайн-демо можно посмотреть здесь.

24

для jQuery (по крайней мере, версия 1.11.2) для меня работала следующая процедура.

  1. щелкните правой кнопкой мыши на элементе и откройте "Chrome Developer Tools"
  2. тип $._data((), 'events'); в 'консоли'
  3. разверните прикрепленные объекты и дважды щелкните handler: значение.
  4. Это показывает исходный код прикрепленной функции, поиск части этого с помощью вкладки "Поиск".

и пришло время перестать заново изобретать колесо и начните использовать события vanilla JS ... :)

how-to-find-jquery-click-handler-function

16

Это не будет показывать пользовательские события, подобные тем, которые может создать ваш скрипт, если это плагин jquery. например : 

jQuery(function($){
 var ThingName="Something";

 $("body a").live('click', function(Event){
   var $this = $(Event.target);
       $this.trigger(ThingName + ":custom-event-one");
 });

 $.on(ThingName + ":custom-event-one", function(Event){
   console.log(ThingName, "Fired Custom Event: 1", Event);
 })

});

панель событий в разделе Скрипты в инструментах разработчика chrome не покажет вам "что-то: custom-event-one"

14