Event Listeners окреслюють кожен елемент, який має event listener, розфарбовані за типом — клацання, наведення курсора, прокручування, дотик, клавіатура та форма — показує, звідки взявся кожен обробник, і блимає елементи, коли змінюється DOM.
З’ясування того, чому щось реагує — чи ні — зазвичай починається із запитання, на яке сторінка не дасть відповіді: чи є взагалі обробник клацання на цьому елементі? Який елемент фактично володіє поведінкою наведення? Що таке прослуховування прокручування та зависання сторінки? Browser 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 клацання, наведення курсора, прокручування, дотику, клавіатури та форм окреслені власним кольором із плитками, щоб показати або приховати кожен вид.
Вбудовані атрибути, 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 інструментів розробника
