Просмотр событий, инициируемых элементами, с помощью Chrome DevTools

Чтобы устранить неполадки и оптимизировать обработку событий на веб-страницах, вы можете использовать Chrome DevTools для проверки события, вызванные определенными элементами.

Выполните следующие шаги с помощью Chrome Web. Разработчик:

1. Проверить элемент:

   • Нажмите правой кнопкой мыши целевой элемент и выберите «Проверить» или перейдите к « Вкладка «Элементы» в DevTools.

2. Монитор События:

   • Использование MonitorEvents:

     • Откройте вкладку «Консоль».
     • Введите MonitorEvents ($0) в консоли, где $0 представляет выбранный element.

   • Указание типа события:

     • При желании укажите тип события, которое вы хотите отслеживать, в качестве второго аргумента для мониторингаEvents, например, MonitorEvents(document.body, 'mouse').

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

3. Прекратить мониторинг:

   • Чтобы прекратить мониторинг событий, введите unmonitorEvents($0) в консоли.

Доступные типы событий (по состоянию на 30 января 2023 г.)

Вы можете сузить отключить отслеживаемые события, указав следующее типы:

• мышь: события мыши (вниз, вверх, щелчок и т. д.)
• клавиша: события клавиатуры (вниз, вверх, нажатие и т. д.)
• touch: события касания (начало, перемещение, конец, и т.д.)
• control: события управления элементом (изменение размера, фокус, изменение и т. д.)