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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

Вы можете использовать monitorEvents.

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

monitorEvents($0)

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

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

unmonitorEvents($0)

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

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

monitorEvents(document.body, 'mouse')

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

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

usage of monitorEvents function

Ответ 3

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

Ответ 4

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

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

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

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

Ответ 5

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