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

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

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

• Нажмите, F12чтобы открыть Dev Tools
• Нажмите вкладку Источники
• На правой стороне прокрутите вниз до «Точки останова приемника событий» и раскройте дерево
• Нажмите на события, которые вы хотите прослушать.
• Взаимодействуйте с целевым элементом, если они сработают, вы получите точку останова в отладчике

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

Вы можете использовать функцию monitorEvents .

Просто проверьте ваш элемент ( right mouse click→ Inspectна видимом элементе или перейдите на Elementsвкладку в Chrome Developer Tools и выберите нужный элемент), затем перейдите на Consoleвкладку и напишите:

monitorEvents($0)

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

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

unmonitorEvents($0)

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

Вы также можете указать событие «тип» в качестве второго параметра, чтобы сузить отслеживаемые события до некоторого предопределенного набора. Например:

monitorEvents(document.body, 'mouse')

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

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

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

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

1. Щелкните правой кнопкой мыши на элементе и откройте «Инструменты разработчика Chrome».
2. Введите $._data(($0), 'events');«Консоль»
3. Разверните прикрепленные объекты и дважды щелкните handler:значение.
4. Здесь показан исходный код присоединенной функции, найдите ее часть с помощью вкладки «Поиск».

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

Это не покажет пользовательские события, подобные тем, которые ваш скрипт может создать, если это плагин 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»