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

603

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

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

javascript google-chrome-devtools

— Джон Хоффман
источник

13

Этот букмарклет может быть полезен: sprymedia.co.uk/article/Visual+Event+2

— scytale

1

Ответ здесь ценный, но букмарклет выше ^ на самом деле решил мою проблему. sprymedia.co.uk/article/Visual+Event+2

— Джаззи

879

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

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

— Matt
источник

11

это решение является проблемой, если после вас идут события мыши, так как точка останова убивает поток

— WendyG

67

Что если все события указывают на минимизированный jquery, который меня не волнует, как мне добраться до функции, которая использует этот jquery.

— Мухаммед Умер

14

Может ли он показать пользовательские события, которые были созданы мной? Когда я прочитал, что это изменило жизни, это было первое, о чем я подумал. Я что-то пропустил?

— Тебе

24

@MuhammadUmer Вы можете включить jQuery в черный ящик, так что Chrome пропустит его и сразу перейдет к исходному коду. developer.chrome.com/devtools/docs/blackboxing

— Мэтт Цойнерт

1

@MuhammadUmer, что если вы просто перестанете использовать JQuery?

— Джон Балвин Ариас

831

Вы можете использовать функцию 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, который иллюстрирует, как работает эта функция:

использование функции monitorEvents

— Мариуш Павельски
источник

2

Согласовано. Это дефактный способ отслеживания и отслеживания событий на определенных элементах.

— dmackerman

1

Ах да, я вижу. Это было «неопределенное», которое сбивало меня с толку, но теперь я вижу, что у вас есть то же самое в вашем полезном анимированном GIF. Спасибо.

— MSC

1

какой инструмент вы использовали, чтобы сделать GIF

— JerryGoyal

3

@MariuszPawelski Как действовать дальше? Я сделал это и нашел событие click, которое было интересным для меня. Но как мне найти то, что происходит, когда я нажимаю на элемент? Какой код выполняется? Какое свойство MouseEventя должен искать?

— Утку

3

но где найти обработчик, например, обработчик щелчка.

— Шейх Абдул Вахид

26

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

— tifkin
источник

22

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

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

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

— Даниэль Соколовский
источник

15

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

— airtonix
источник

21

Как же тогда найти эти события?

— Calydon