Event Listeners načrtávajú každý prvok, ktorý má event listener, zafarbený podľa druhu – kliknutie, umiestňovanie kurzora myši, posúvanie, dotyk, klávesnica a formulár – zobrazuje, odkiaľ pochádza každý obslužný program, a prvky bliká pri zmene modelu DOM.
Zisťovanie, prečo niečo reaguje – alebo nereaguje – zvyčajne začína otázkou, na ktorú stránka neodpovie: existuje na tomto prvku vôbec obsluha kliknutia? Ktorý prvok vlastne vlastní správanie vznášania? Čo znamená počúvanie posúvania a zasekávanie stránky? Prehliadač DevTools dokáže zobraziť zoznam listeners jedného prvku naraz, ak už viete, ktorý prvok vybrať.
Tento nástroj odpovedá na otázku pre celú stránku naraz. Každý prvok s listener dostane obrys vo farbe svojho druhu – kliknutie, vznášanie sa, posúvanie, dotyk a ťahanie, klávesnica alebo forma a zameranie – a umiestnením kurzora myši sa zobrazia presné udalosti a odkiaľ každá pochádza: vložený atribút, vlastná vlastnosť, obslužný program React alebo Vue, jQuery alebo addEventListener. Dlaždice kategórií zapínajú a vypínajú každý druh a zoznam pod nimi pomenúva každý prvok, takže jedným kliknutím sa k nemu presuniete.
Rámce sú spracované správne. React pripojí svojich listeners ku koreňu a interne odosiela udalosti, vďaka čomu bude celá aplikácia vyzerať klikateľná; nástroj odloží tieto koreňové registrácie bokom a zobrazí manipulátory React na prvkoch, ktoré ich deklarujú. Rýchle skenovanie nepotrebuje žiadne opätovné načítanie a pokrýva inline obslužné programy, React, Vue a jQuery. Listeners pridaných pomocou obyčajného addEventListener pred otvorením nástroja je možné vidieť iba od začiatku načítania stránky, takže Reload & record stránku znova načíta so zapnutým nahrávaním – nástroj sa potom sám znova otvorí so všetkými zahrnutými listener vrátane poslucháčov na úrovni stránky v window a document.
Druhá záložka sleduje samotný DOM. Každý pridaný alebo odstránený uzol, zmena atribútu a zmena textu na stránke bliká, počítadlá zobrazujú mutácie za sekundu a zoznam zoraďuje prvky, ktoré sa najviac menia, s príslušnými atribútmi. Stabilný prúd, keď sa nikto nedotkne stránky, zvyčajne znamená časovač, animáciu riadenú JavaScriptom alebo rámec, ktorý sa znova vykresľuje viac, ako by mal – presne tie veci, ktoré vybíjajú batérie a spôsobujú, že sa stránky zasekávajú.
Prvky s poslucháčmi kliknutia, vznášania, posúvania, dotyku, klávesnice a listeners formulárov sú ohraničené vlastnou farbou s dlaždicami na zobrazenie alebo skrytie každého druhu.
Vložené atribúty, vlastnosti on-properties, manipulátory React a Vue, udalosti jQuery a volania addEventListener, označené na každom prvku.
listeners na koreňovej úrovni React sú vyčlenené a ich obslužné prvky sú zobrazené na prvkoch, ktoré ich deklarujú, a nie na celej aplikácii.
Reload & record zachytí každé volanie addEventListener od začiatku načítania stránky, vrátane listeners window a document, len pre toto jedno načítanie.
Na stránke blikajú pridané a odstránené uzly, zmeny atribútov a zmeny textu s počítadlom mutácií za sekundu.
Zoradený zoznam prvkov, ktoré sa najviac menia, so zahrnutými atribútmi, ukazuje priamo na nekontrolované opätovné vykreslenie.
Okamžitým pohľadom uvidíte, či má tlačidlo skutočne listener alebo či obsluha namiesto toho sedí na obale.
Nájdite každý prvok, ktorý počúva rolovanie, koliesko alebo dotykový pohyb, vrátane listeners v window a document.
Skontrolujte, ktoré ovládacie prvky reagujú na udalosti klávesnice a ktoré iba na myš.
Sledujte počítadlo mutácií, kým je stránka nečinná; prvky, ktoré neustále menia bod na časovač alebo rámec vykonávajúci prácu navyše.
Umiestnite kurzor myši na neznámu stránku a zistite, ktoré časti sú interaktívne a ktorý rámec ich spojil.
Kliknite na ikonu Event Listeners v doku DevSuite Pro. Okamžite sa spustí rýchle skenovanie a načrtne každý prvok, ktorý nájde.
Umiestnením kurzora myši na ľubovoľný načrtnutý prvok zobrazíte jeho udalosti a ich zdroje. Pomocou dlaždíc kategórií zobrazíte iba listeners po kliknutí, umiestnení kurzora myši alebo rolovania.
Ak chcete stránku znova načítať so zapnutým nahrávaním, stlačte tlačidlo Reload & record. Nástroj sa znova otvorí sám o sebe a teraz zahŕňa každé volanie addEventListener.
Kliknutím na riadok v zozname posuňte stránku na daný prvok a prebliknite ho. Copy report vám poskytne úplný zoznam ako text.
Otvorte kartu DOM mutations a použite stránku. Meniace sa prvky blikajú a tie najrušnejšie sa dostanú na začiatok zoznamu.
Nainštalujte si DevSuite Pro zadarmo a odomknite viac ako 74 vývojárskych nástools pre váš prehliadač.
