Event Listeners skisserer hvert element som har en event listener, farget etter type - klikk, pek, rull, berør, tastatur og skjema - viser hvor hver behandler kom fra, og blinker elementer når DOM endres.
Å finne ut hvorfor noe reagerer – eller ikke – starter vanligvis med et spørsmål siden ikke vil svare på: er det en klikkbehandler på dette elementet i det hele tatt? Hvilket element eier egentlig sveveadferden? Hva er det å lytte til å rulle og få siden til å stamme? Browser DevTools kan liste listeners til ett element om gangen, hvis du allerede vet hvilket element du skal velge.
Dette verktøyet svarer på spørsmålet for hele siden på en gang. Hvert element med en listener får et omriss i fargen av sitt slag – klikk, svev, rull, berør og dra, tastatur eller form og fokus – og ved å holde musepekeren vises de nøyaktige hendelsene og hvor hver kom fra: et innebygd attributt, en eiendom på eiendommen, en React eller Vue behandler, jQuery eller addEventListener. Kategoribrikker slår hver type av og på, og listen under navngir hvert element, så ett klikk ruller deg til det.
Rammer håndteres riktig. React knytter sine listeners til roten og sender hendelser internt, noe som vil få hele appen til å se klikkbar ut; verktøyet setter disse rotregistreringene til side og viser React behandlerne på elementene som erklærer dem. Hurtigskanningen trenger ingen omlasting og dekker inline-behandlere, React, Vue og jQuery. Listeners lagt til med vanlig addEventListener før verktøyet åpnet kan bare sees fra starten av en sideinnlasting, så Reload & record laster siden på nytt én gang med opptak på – verktøyet åpnes deretter av seg selv med hver listener inkludert, også de på sidenivå i window og document.
Den andre fanen ser på selve DOM. Hver lagt til eller fjernet node, endring av attributter og endring av tekst blinker på siden, tellerne viser mutasjoner per sekund, og en liste rangerer elementene som endres mest, med attributtene involvert. En jevn strøm mens ingen berører siden betyr vanligvis en timer, en JavaScript-drevet animasjon eller et rammeverk som gjengir mer enn det burde – akkurat de tingene som tapper batteriene og får sider til å hakke.
Elementer med klikk-, hover-, rull-, berørings-, tastatur- og listeners er skissert i hver sin farge, med fliser for å vise eller skjule hver type.
Inline-attributter, on-properties, React og Vue behandlere, jQuery hendelser og addEventListener kall, merket på hvert element.
React listeners på rotnivå settes til side, og behandlerne vises på elementene som erklærer dem i stedet for på hele appen.
Reload & record fanger opp hvert addEventListener anrop fra starten av en sideinnlasting, listeners window og document, kun for den ene innlastingen.
Lagt til og fjernet noder, attributtendringer og tekstendringer blinker på siden, med en teller for mutasjoner per sekund.
En rangert liste over elementene som endres mest, med attributtene involvert, peker rett på løpende gjengivelser.
Se med et øyeblikk om en knapp faktisk har en listener, eller om handleren sitter på et innpakningselement i stedet.
Finn hvert element som lytter til å rulle, hjul eller berøre, inkludert listeners på window og document.
Sjekk hvilke kontroller som reagerer på tastaturhendelser og hvilke som kun reagerer på musen.
Se mutasjonstelleren mens siden er inaktiv; elementer som stadig endrer seg peker mot en tidtaker eller et rammeverk som gjør ekstra arbeid.
Hold musepekeren rundt et ukjent nettsted for å se hvilke deler som er interaktive og hvilket rammeverk som koblet dem til.
Klikk på Event Listeners -ikonet i DevSuite Pro dokken. En rask skanning kjøres umiddelbart og skisserer hvert element den finner.
Hold markøren over et element som er skissert for å se dets hendelser og deres kilder. Bruk kategoriflisene for å vise bare klikk-, sveve- eller listeners.
Trykk på Reload & record for å laste siden på nytt én gang med opptak på. Verktøyet gjenåpnes av seg selv og inkluderer nå hvert addEventListener kall.
Klikk på en rad i listen for å rulle siden til det elementet og flash det. Copy report gir deg hele listen som tekst.
Åpne fanen DOM mutations og bruk siden. Skiftende elementer blinker, og de travleste stiger til toppen av listen.
Installer DevSuite Pro gratis og lås opp 74+ utviklerverktøy for nettleseren din.
