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

Question

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

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

Answer 1

• Хит F12 открыть Dev Tools
• Перейдите на вкладку Источники
• На правой стороне, прокрутите вниз до "Event Listener Breakpoints", и развёрнутое дерево
• Нажмите на события, которые вы хочу слушать.
• Взаимодействовать с целевым элементом, если они стреляют вы получите точку останова в отладчике

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

Answer 2

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

}); 

Группа событий под Scripts в инструментах разработчика Chrome не будет показывать вам «что-то: заказ событийно-один»

Answer 3

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

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

monitorEvents($0) 

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

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

unmonitorEvents($0) 

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

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

monitorEvents(document.body, 'mouse') 

Список этих доступных видов - here.

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

Answer 4

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

Answer 5

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

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

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