Как просмотреть события, запущенные на элементе в Chrome DevTools?
У меня есть настраиваемый элемент формы на странице из библиотеки. Я хочу видеть, какие события javascript запускаются при взаимодействии с ним, потому что я пытаюсь выяснить, какой обработчик событий использовать.
Как это сделать с помощью Chrome Web Developer?
5 ответов
- нажмите F12 чтобы открыть Dev Tools
- перейдите на вкладку источник
- С правой стороны прокрутите вниз до "точки останова прослушивателя событий" и разверните tree
- нажмите на события, которые вы хотите слушать.
- взаимодействуйте с целевым элементом, если они срабатывают, вы получите точку останова в отладчике
аналогично, вы можете щелкнуть правой кнопкой мыши на целевом элементе - > выберите" проверить элемент " прокрутите вниз справа сторона фрейма dev, внизу- "прослушиватели событий". Разверните дерево, чтобы увидеть, какие события присоединены к элементу. Не уверен, что это работает для событий, которые обрабатываются с помощью пузырьков (я предполагаю, что нет)
можно использовать monitorEvents)
теперь, когда вы перемещаете мышь над этим элементом, фокусируете или щелкаете по нему, имя запущенного события будет отображаться с его данными. чтобы остановить получение этих данных, просто напишите это консоль: вы также можете указать событие " тип " в качестве второго параметра для сужения отслеживаемых событий до некоторого предопределенного набора. Например: список доступных типов составляет здесь. я сделал небольшой gif, который иллюстрирует, как эта функция работает:unmonitorEvents()
- это только последний элемент DOM, выбранный инструментами разработчика Chrome. Вы можете передать туда любой другой объект DOM (например, результат
getElementById
или querySelector
).monitorEvents(document.body, 'mouse')
Визуальное Событие - это небольшой букмарклет, который можно использовать для просмотра обработчиков событий элемента. На онлайн-демо можно посмотреть здесь.
для jQuery (по крайней мере, версия 1.11.2) для меня работала следующая процедура.
- щелкните правой кнопкой мыши на элементе и откройте "Chrome Developer Tools"
- тип
$._data((), 'events');
в 'консоли' - разверните прикрепленные объекты и дважды щелкните
handler:
значение. - Это показывает исходный код прикрепленной функции, поиск части этого с помощью вкладки "Поиск".
и пришло время перестать заново изобретать колесо и начните использовать события vanilla 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"