Event Listeners очертават всеки елемент, който има event listener, оцветен по вид — щракване, задържане на мишката, превъртане, докосване, клавиатура и форма — показва откъде идва всеки манипулатор и мига елементи, когато DOM се променя.
Изясняването защо нещо реагира - или не - обикновено започва с въпрос, на който страницата няма да отговори: има ли изобщо манипулатор на щракване върху този елемент? Кой елемент всъщност притежава поведението при задържане? Какво е слушане на превъртане и каране на страницата да заеква? Browser DevTools може да изброява listeners на един елемент наведнъж, ако вече знаете кой елемент да изберете.
Този инструмент отговаря на въпроса за цялата страница наведнъж. Всеки елемент със listener получава очертание в цвета на своя вид — щракване, задържане на курсора на мишката, превъртане, докосване и плъзгане, клавиатура или форма и фокусиране — и задържането на един показва точните събития и откъде идва всяко: вграден атрибут, on-свойство, манипулатор на React или Vue, jQuery или addEventListener. Плочките с категории включват и изключват всеки вид, а списъкът отдолу наименува всеки елемент, така че едно щракване ви превърта до него.
Рамките се обработват правилно. React прикачва своите listeners към корена и изпраща събития вътрешно, което би направило цялото приложение да изглежда кликащо; инструментът оставя тези root регистрации настрана и показва манипулаторите React върху елементите, които ги декларират. Бързото сканиране не се нуждае от презареждане и обхваща вградени манипулатори, React, Vue и jQuery. Listeners добавени с обикновен addEventListener преди отварянето на инструмента, могат да се видят само от началото на зареждането на страницата, така че Reload & record презарежда страницата веднъж с включен запис — след това инструментът се отваря отново сам с всеки включен listener, тези на ниво страница в window и document също.
Вторият раздел наблюдава самия DOM. Всеки добавен или премахнат възел, промяна на атрибут и промяна на текст мига на страницата, броячите показват мутации в секунда, а списък класира елементите, които се променят най-много, с включените атрибути. Стабилният поток, докато никой не докосва страницата, обикновено означава таймер, управлявана от JavaScript анимация или рамка, която преизобразява повече, отколкото би трябвало – точно нещата, които изтощават батериите и карат страниците да заекват.
Елементите с щракане, задържане на мишката, превъртане, докосване, клавиатура и listeners на формуляри са очертани в собствен цвят, с плочки за показване или скриване на всеки вид.
Вградени атрибути, on-properties, 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+ инструмента за разработчици за вашия браузър.
