Event Listeners orisujejo vsak element, ki ima event listener, obarvane glede na vrsto – klik, lebdenje, drsenje, dotik, tipkovnica in obrazec – prikazujejo, od kod prihaja posamezen obravnavalec, in utripajo elementi, ko se spreminja DOM.
Ugotavljanje, zakaj se nekaj odzove – ali ne – se običajno začne z vprašanjem, na katerega stran ne bo odgovorila: ali na tem elementu sploh obstaja naprava za obravnavo klikov? Kateri element je dejansko lastnik vedenja lebdenja? Kaj je poslušanje drsenja in povzročanje zatikanja strani? Browser DevTools lahko navede listeners enega elementa naenkrat, če že veste, kateri element izbrati.
To orodje odgovori na vprašanje za celotno stran hkrati. Vsak element s listener dobi oris v barvi svoje vrste – klik, lebdenje, drsenje, dotik in vlečenje, tipkovnica ali oblika in fokus – in lebdenje enega prikazuje natančne dogodke in od kod je vsak prišel: atribut v vrstici, on-property, React ali Vue handler, jQuery ali addEventListener. Ploščice kategorij vklopijo in izklopijo vsako vrsto, spodnji seznam pa poimenuje vsak element, tako da se z enim klikom pomaknete do njega.
Z okvirji se ravna pravilno. React svoje listeners pripne korenu in interno pošilja dogodke, zaradi česar bi bila celotna aplikacija videti klikljiva; orodje postavi te korenske registracije na stran in prikaže obdelovalce React na elementih, ki jih deklarirajo. Hitro skeniranje ne zahteva ponovnega nalaganja in zajema vgrajene upravljalnike, React, Vue in jQuery. Listeners dodane z navadnim addEventListener preden se orodje odpre, je mogoče videti šele od začetka nalaganja strani, zato Reload & record enkrat znova naloži stran z vklopljenim snemanjem — orodje se nato samo odpre z vsemi vključenimi listener, tudi tistimi na ravni strani v window in document.
Drugi zavihek opazuje sam DOM. Vsako dodano ali odstranjeno vozlišče, sprememba atributa in sprememba besedila utripa na strani, števci prikazujejo mutacije na sekundo, seznam pa razvršča elemente, ki se najbolj spreminjajo, z vključenimi atributi. Stalen tok, medtem ko se nihče ne dotakne strani, običajno pomeni časovnik, animacijo, ki jo poganja JavaScript, ali ogrodje, ki ponovno upodablja več, kot bi moralo – točno tiste stvari, ki praznijo baterije in povzročajo jecljanje strani.
Elementi s listeners klikov, lebdenja, drsenja, dotika, tipkovnice in obrazcev so označeni v svoji barvi, s ploščicami za prikaz ali skrivanje vsake vrste.
Atributi v vrstici, on-properties, upravljalniki React in Vue, dogodki jQuery in klici addEventListener, označeni na vsakem elementu.
React listeners na korenski ravni so postavljeni na stran, njegovi upravljalci pa so prikazani na elementih, ki jih deklarirajo, in ne na celotni aplikaciji.
Reload & record zajame vsak klic addEventListener od začetka nalaganja strani, vključno s listeners window in document, samo za to eno nalaganje.
Dodana in odstranjena vozlišča, spremembe atributov in spremembe besedila utripajo na strani s števcem mutacij na sekundo.
Uvrščen seznam elementov, ki se najbolj spreminjajo, z vključenimi atributi kaže naravnost na bežne ponovne upodobitve.
Na prvi pogled si oglejte, ali ima gumb dejansko listener ali pa se upravljalnik namesto tega nahaja na ovojnem elementu.
Poiščite vsak element, ki posluša drsenje, kolesce ali premikanje na dotik, vključno s listeners v window in document.
Preverite, kateri kontrolniki se odzivajo na dogodke na tipkovnici in kateri samo na miško.
Oglejte si števec mutacij, ko je stran nedejavna; elementi, ki se nenehno spreminjajo, kažejo na časovnik ali ogrodje, ki opravlja dodatno delo.
Premaknite se okoli neznanega mesta, da vidite, kateri deli so interaktivni in kateri okvir jih je povezal.
Kliknite ikono Event Listeners v doku DevSuite Pro. Hitro skeniranje se zažene takoj in opiše vsak element, ki ga najde.
Premaknite miškin kazalec na kateri koli označen element, da vidite njegove dogodke in njihove vire. Uporabite ploščice kategorij, da prikažete samo listeners klikov, lebdenja ali drsenja.
Pritisnite Znova Reload & record, da enkrat znova naložite stran z vključenim snemanjem. Orodje se znova odpre samo in zdaj vključuje vsak klic addEventListener.
Kliknite vrstico na seznamu, da se pomaknete po strani do tega elementa in ga utripate. Copy report vam daje celoten seznam kot besedilo.
Odprite zavihek DOM mutations in uporabite stran. Spreminjajoči se elementi utripajo, najbolj obremenjeni pa se dvignejo na vrh seznama.
Namestite DevSuite Pro brezplačno in odklenite več kot 74 orodij za razvijalce za svoj brskalnik.
