Event Listeners обозначают каждый элемент, у которого есть event listener, раскрашенный по типу — щелчок, наведение, прокрутка, касание, клавиатура и форма — показывают, откуда взялся каждый обработчик, и мигают элементы при изменении DOM.
Выяснение того, почему что-то реагирует или не реагирует, обычно начинается с вопроса, на который страница не отвечает: есть ли вообще обработчик кликов на этом элементе? Какой элемент на самом деле отвечает за поведение при наведении? Что слушает прокрутку и заставляет страницу зависать? DevTools браузера могут отображать список listeners одного элемента за раз, если вы уже знаете, какой элемент выбрать.
Этот инструмент отвечает на вопрос сразу для всей страницы. Каждый элемент с listener получает контур своего цвета — щелчок, наведение, прокрутка, касание и перетаскивание, клавиатура или форма и фокус — и наведение на него показывает точные события и источник каждого из них: встроенный атрибут, свойство on-property, обработчик React или Vue, jQuery или addEventListener. Плитки категорий включают и выключают каждый вид, а список под ним дает название каждому элементу, поэтому вы можете перейти к нему одним щелчком мыши.
Фреймворки обрабатываются правильно. React прикрепляет своих listeners к корню и отправляет события внутри, благодаря чему все приложение будет выглядеть кликабельным; инструмент откладывает эти корневые регистрации и показывает обработчики React на элементах, которые их объявляют. Быстрое сканирование не требует перезагрузки и охватывает встроенные обработчики React, Vue и jQuery. Listeners добавленные с помощью простого addEventListener до открытия инструмента, можно увидеть только с начала загрузки страницы, поэтому Reload & record перезагружает страницу один раз с включенной записью — затем инструмент снова открывается сам по себе со всеми включенными listener, а также на уровне страницы в window и document.
Вторая вкладка наблюдает за самим DOM. Каждый добавленный или удаленный узел, изменение атрибута и изменение текста мигают на странице, счетчики показывают мутации в секунду, а в списке ранжируются элементы, которые изменяются больше всего, с указанием задействованных атрибутов. Постоянный поток, когда никто не прикасается к странице, обычно означает таймер, анимацию на основе JavaScript или фреймворк, перерисовывающий больше, чем нужно — именно это разряжает батарею и заставляет страницы зависать.
Элементы с listeners щелчков, наведения, прокрутки, касания, клавиатуры и форм обведены собственным цветом, а каждый из них можно отобразить или скрыть плитками.
Встроенные атрибуты, встроенные свойства, обработчики React и Vue, события jQuery и вызовы addEventListener, помеченные на каждом элементе.
listeners корневого уровня React отложены, а его обработчики отображаются на элементах, которые их объявляют, а не на всем приложении.
Reload & record перехватывает каждый вызов addEventListener с начала загрузки страницы, включая listeners window и document, только для этой одной загрузки.
Добавленные и удаленные узлы, изменения атрибутов и изменения текста мигают на странице со счетчиком мутаций в секунду.
Ранжированный список элементов, которые изменяются больше всего, с задействованными атрибутами прямо указывает на неконтролируемый повторный рендеринг.
Сразу посмотрите, действительно ли у кнопки есть listener или вместо этого обработчик находится на элементе-оболочке.
Найдите каждый элемент, слушающий прокрутку, колесо или сенсорное движение, включая listeners в window и document.
Проверьте, какие элементы управления реагируют на события клавиатуры, а какие — только на мышь.
Следите за счетчиком мутаций, пока страница простаивает; элементы, которые постоянно меняются, указывают на таймер или структуру, выполняющую дополнительную работу.
Наведите указатель мыши на незнакомый сайт, чтобы увидеть, какие части являются интерактивными и какая платформа их подключила.
Щелкните значок « Event Listeners в доке DevSuite Pro. Быстрое сканирование запускается немедленно и выделяет каждый найденный элемент.
Наведите курсор на любой выделенный элемент, чтобы увидеть его события и их источники. Используйте плитки категорий, чтобы отображать только listeners щелчков, наведения или прокрутки.
Нажмите Reload & record, чтобы перезагрузить страницу один раз при включенной записи. Инструмент снова открывается самостоятельно и теперь включает каждый вызов addEventListener.
Щелкните строку в списке, чтобы прокрутить страницу до этого элемента и запустить его. Copy report дает вам полный список в виде текста.
Откройте вкладку DOM mutations и используйте страницу. Меняющиеся элементы мигают, а самые загруженные поднимаются в начало списка.
Установите DevSuite Pro бесплатно и разблокируйте более 74 инструментов разработчика для вашего браузера.
