Event Listeners kirjeldavad kõiki elemente, millel on event listener, mis on värvitud liigi järgi – klõps, hõljutamine, kerimine, puudutus, klaviatuur ja vorm – näitab, kust iga töötleja tuli, ja vilgub elemente, kui DOM muutub.
Selle väljaselgitamine, miks miski reageerib – või ei reageeri – algab tavaliselt küsimusega, millele leht ei vasta: kas sellel elemendil on üldse klikitöötleja? Millisele elemendile tegelikult hõljumise käitumine kuulub? Mis on kerimise kuulamine ja lehe kokutamine? Brauseri DevTools saab korraga loetleda ühe elemendi listeners, kui teate juba, millist elementi valida.
See tööriist vastab korraga kogu lehe küsimusele. Iga listener element saab omalaadse värviga kontuuri – klõpsake, hõljutage, kerige, puudutage ja lohistage, klaviatuuri või vormindage ja fokusseerige – ning selle hõljutamine näitab täpseid sündmusi ja nende päritolu: tekstisisene atribuut, atribuut, React või Vue töötleja, jQuery või addEventListener. Kategooriapaanid lülitavad iga tüübi sisse ja välja ning all olev loend nimetab iga elementi, nii et üks klõps kerib teid selleni.
Raame käsitletakse korralikult. React seob oma listeners juure ja saadab sündmused sisemiselt välja, mis muudaks kogu rakenduse klõpsatavaks; tööriist jätab need juurregistreeringud kõrvale ja näitab neid deklareerivate elementide React töötlejaid. Kiirskannimine ei vaja uuesti laadimist ja hõlmab sisemisi töötlejaid, React, Vue ja jQuery. Enne tööriista avamist lihtsa addEventListener lisatud Listeners saab näha ainult lehe laadimise algusest, nii et Reload & record laadib lehe uuesti üks kord, kui salvestamine on sisse lülitatud – seejärel avaneb tööriist ise uuesti koos iga listener, lehetasemel ka window ja document.
Teine vahekaart jälgib DOM-i ennast. Iga lisatud või eemaldatud sõlm, atribuudimuutus ja tekstimuutus vilgub lehel, loendurid näitavad mutatsioone sekundis ja loendis järjestatakse kõige rohkem muutuvad elemendid koos kaasatud atribuutidega. Ühtlane voog ajal, mil keegi lehte ei puuduta, tähendab tavaliselt taimerit, JavaScripti juhitud animatsiooni või raamistikku, mis renderdab rohkem kui peaks – täpselt neid asju, mis tühjendavad akusid ja panevad lehed kokutama.
Klõpsamise, hõljutamise, kerimise, puudutuse, klaviatuuri ja listeners elemendid on oma värviga piiritletud, igat tüüpi paanidega kuvatakse või peita.
Tekstisisesed atribuudid, atribuudid, React ja Vue käitlejad, jQuery sündmused ja addEventListener kutsed, mis on märgistatud igal elemendil.
React juurtaseme listeners jäetakse kõrvale ja selle töötlejad kuvatakse neid deklareerivatel elementidel, mitte kogu rakenduses.
Reload & record iga addEventListener kõne alates lehe laadimise algusest, sealhulgas window ja document, ainult listeners ühe laadimise jaoks.
Lisatud ja eemaldatud sõlmed, atribuutide muudatused ja tekstimuudatused vilguvad lehel koos mutatsioonide sekundis loenduriga.
Enim muutuvate elementide järjestatud loend koos kaasatud atribuutidega osutab otse jooksvatele ümberrenderdustele.
Vaadake lühidalt, kas nupul on ka listener või istub töötleja hoopis ümbriselemendil.
Otsige üles kõik kerimist, ratast või puutetundlikku liigutamist kuulavad elemendid, sealhulgas window ja document listeners.
Kontrollige, millised juhtelemendid reageerivad klaviatuuri sündmustele ja millised ainult hiirele.
Jälgige mutatsioonide loendurit, kui leht on jõude; elemendid, mis pidevalt muutuvad, osutavad taimerile või lisatööd tegevale raamistikule.
Hõljutage kursorit tundmatu saidi ümber, et näha, millised osad on interaktiivsed ja milline raamistik need ühendas.
Klõpsake DevSuite Pro dokis ikooni Event Listeners. Kiire skannimine käivitub kohe ja kirjeldab iga leitud elementi.
Hõljutage kursorit mis tahes visandatud elemendil, et näha selle sündmusi ja nende allikaid. Kasutage kategooriapaane, et kuvada ainult kliki-, hõljutus- või listeners.
Lehe ühekordseks uuesti laadimiseks, kui salvestamine on sisse lülitatud, vajutage nuppu Reload & record. Tööriist avaneb uuesti iseseisvalt ja sisaldab nüüd iga addEventListener kõnet.
Leheküljel selle elemendini kerimiseks ja selle vilkumiseks klõpsake loendis real. Copy report annab teile täieliku loendi tekstina.
Avage vahekaart DOM mutations ja kasutage lehte. Muutuvad elemendid vilguvad ja kõige aktiivsemad tõusevad nimekirja etteotsa.
Paigaldage DevSuite Pro tasuta ja avage 74+ arendustööriista oma brauserile.
