Event Listeners nastiňují každý prvek, který má event listener, zabarvený podle druhu – kliknutí, najetí myší, posouvání, dotyk, klávesnice a formulář – ukazuje, odkud pochází každý ovladač, a bliká prvky, jak se mění model DOM.
Zjišťování, proč něco reaguje – nebo ne – obvykle začíná otázkou, na kterou stránka neodpoví: existuje na tomto prvku vůbec obsluha kliknutí? Který prvek ve skutečnosti vlastní chování vznášení? Co je to poslech rolování a zasekávání stránky? Prohlížeč DevTools může zobrazit seznam listeners jednoho prvku najednou, pokud již víte, který prvek vybrat.
Tento nástroj odpovídá na otázku pro celou stránku najednou. Každý prvek s listener získá obrys v barvě svého druhu – kliknutí, podržení, posouvání, dotyk a přetažení, klávesnice nebo formulář a zaměření – a umístěním kurzoru na jeden se zobrazí přesné události a odkud každá pochází: vložený atribut, vlastnost on-property, ovladač React nebo Vue, jQuery nebo addEventListener. Dlaždice kategorií zapínají a vypínají každý druh a seznam pod nimi pojmenovává každý prvek, takže k němu přejdete jedním kliknutím.
Rámce jsou zpracovány správně. React připojuje své listeners ke kořenovému adresáři a interně odesílá události, díky čemuž by celá aplikace vypadala jako klikací; nástroj odloží tyto kořenové registrace stranou a zobrazí ovladače React na prvcích, které je deklarují. Rychlé skenování nepotřebuje žádné opětovné načítání a pokrývá inline handlery, React, Vue a jQuery. Listeners přidané pomocí prostého addEventListener před otevřením nástroje lze vidět pouze od začátku načtení stránky, takže Reload & record stránku znovu načte jednou se zapnutým nahráváním – nástroj se pak sám znovu otevře se všemi zahrnutými listener, včetně těch na úrovni stránky v window a document.
Druhá záložka sleduje samotný DOM. Každý přidaný nebo odebraný uzel, změna atributu a změna textu na stránce bliká, počítadla ukazují mutace za sekundu a seznam seřadí prvky, které se nejvíce mění, včetně příslušných atributů. Stálý proud, když se stránky nikdo nedotýká, obvykle znamená časovač, animaci řízenou JavaScriptem nebo překreslování rámce víc, než by mělo – přesně ty věci, které vybíjejí baterie a způsobují, že se stránky zasekávají.
Prvky s poslouchači kliknutí, najetí myší, posouváním, dotykem, klávesnicí a formulářovými listeners jsou ohraničeny vlastní barvou s dlaždicemi pro zobrazení nebo skrytí každého druhu.
Vložené atributy, vlastnosti on-properties, ovladače React a Vue, události jQuery a volání addEventListener, označené na každém prvku.
listeners na kořenové úrovni React jsou vyčleněny a jeho ovladače jsou zobrazeny na prvcích, které je deklarují, nikoli na celé aplikaci.
Reload & record zachytí každé volání addEventListener od začátku načtení stránky, včetně listeners window a document, pouze pro toto jedno načtení.
Na stránce blikají přidané a odebrané uzly, změny atributů a změny textu s počítadlem mutací za sekundu.
Seřazený seznam prvků, které se nejvíce mění, včetně příslušných atributů, ukazuje přímo na nekontrolovatelné vykreslení.
Na první pohled uvidíte, zda má tlačítko ve skutečnosti listener, nebo zda obsluha místo toho sedí na prvku obalu.
Najděte každý prvek, který poslouchá posouvání, kolečko nebo dotykový pohyb, včetně listeners v window a document.
Zkontrolujte, které ovládací prvky reagují na události klávesnice a které pouze na myš.
Sledujte počítadlo mutací, když je stránka nečinná; prvky, které neustále mění bod na časovač nebo rámec, který dělá práci navíc.
Umístěte ukazatel myši na neznámý web a zjistěte, které části jsou interaktivní a který rámec je propojil.
Klikněte na ikonu Event Listeners v doku DevSuite Pro. Okamžitě se spustí rychlé skenování a nastíní každý prvek, který najde.
Umístěním kurzoru na libovolný načrtnutý prvek zobrazíte jeho události a jejich zdroje. Pomocí dlaždic kategorií zobrazíte pouze listeners kliknutí, najetí myší nebo posouvání.
Stisknutím tlačítka Reload & record znovu načtete stránku se zapnutým nahráváním. Nástroj se znovu otevře sám o sobě a nyní zahrnuje každé volání addEventListener.
Kliknutím na řádek v seznamu posuňte stránku na tento prvek a zablikejte. Copy report vám poskytne úplný seznam jako text.
Otevřete kartu DOM mutations a použijte stránku. Měnící se prvky blikají a ty nejvytíženější se dostanou na začátek seznamu.
Nainstalujte si DevSuite Pro zdarma a odemkněte 74+ vývojářských nástrojů pro svůj prohlížeč.
