Event Listeners skitserer hvert element, der har en event listener, farvet efter type - klik, svæv, rul, berøring, tastatur og formular - viser, hvor hver handler kom fra, og blinker elementer, når DOM ændres.
At finde ud af, hvorfor noget reagerer - eller ikke - starter normalt med et spørgsmål, som siden ikke vil svare på: Er der overhovedet en klikhåndtering på dette element? Hvilket element ejer egentlig svæveadfærden? Hvad er det at lytte til scroll og få siden til at stamme? Browser DevTools kan liste listeners til et element ad gangen, hvis du allerede ved, hvilket element du skal vælge.
Dette værktøj besvarer spørgsmålet for hele siden på én gang. Hvert element med en listener får et omrids i farven af sin art - klik, svæv, rul, berør og træk, tastatur eller form og fokus - og svævende over ét viser de nøjagtige hændelser, og hvor hver enkelt kom fra: en inline-attribut, en on-property, en React eller Vue handler, jQuery eller addEventListener. Kategoribrikker slår hver type til og fra, og listen nedenunder navngiver hvert element, så et enkelt klik ruller dig til det.
Rammer håndteres korrekt. React knytter sine listeners til roden og sender begivenheder internt, hvilket ville få hele appen til at se klikbar ud; værktøjet sætter disse rodregistreringer til side og viser React handlerne på de elementer, der erklærer dem. Den hurtige scanning behøver ingen genindlæsning og dækker inline-handlere, React, Vue og jQuery. Listeners der er tilføjet med almindelig addEventListener før værktøjet åbnede, kan kun ses fra starten af en sideindlæsning, så Reload & record genindlæser siden én gang med optagelse aktiveret - værktøjet genåbner derefter af sig selv med hver inkluderet listener, også dem på sideniveau i window og document.
Den anden fane overvåger selve DOM. Hver tilføjet eller fjernet node, attributændring og tekstændring blinker på siden, tællerne viser mutationer pr. sekund, og en liste rangerer de elementer, der ændrer sig mest, med de involverede attributter. En konstant strøm, mens ingen rører siden, betyder normalt en timer, en JavaScript-drevet animation eller et framework, der genrenderer mere, end det burde - præcis de ting, der dræner batterierne og får sider til at stamme.
Elementer med klik, svæv, rul, berøring, tastatur og listeners er skitseret i deres egen farve, med fliser til at vise eller skjule hver slags.
Inline-attributter, on-properties, React og Vue handlere, jQuery begivenheder og addEventListener -kald, mærket på hvert element.
React listeners på rodniveau sættes til side, og dens behandlere vises på de elementer, der erklærer dem, snarere end på hele appen.
Reload & record fanger hvert addEventListener kald fra starten af en sideindlæsning, listeners window og document, kun for den ene indlæsning.
Tilføjede og fjernede noder, attributændringer og tekstændringer blinker på siden med en mutations-per-sekund-tæller.
En rangeret liste over de elementer, der ændrer sig mest, med de involverede attributter, peger direkte på løbske gengivelser.
Se med et øjeblik, om en knap faktisk har en listener, eller om handleren sidder på et indpakningselement i stedet for.
Find hvert element, der lytter til at scrolle, hjul eller touchmove, inklusive listeners på window og document.
Tjek, hvilke kontroller der reagerer på tastaturhændelser, og hvilke der kun reagerer på musen.
Se mutationstælleren, mens siden er inaktiv; elementer, der bliver ved med at skifte, peger på, at en timer eller et rammeværk gør ekstra arbejde.
Hold musen rundt på et ukendt websted for at se, hvilke dele der er interaktive, og hvilke rammer der har tilsluttet dem.
Klik på ikonet Event Listeners i DevSuite Pro dockingstationen. En hurtig scanning kører med det samme og skitserer hvert element, den finder.
Hold markøren over et hvilket som helst skitseret element for at se dets begivenheder og deres kilder. Brug kategorifelterne til kun at vise listeners klik, svæv eller rul.
Tryk på Reload & record for at genindlæse siden én gang med optagelse slået til. Værktøjet genåbner af sig selv og inkluderer nu hvert addEventListener kald.
Klik på en række på listen for at rulle siden til det pågældende element og flashe det. Copy report giver dig den fulde liste som tekst.
Åbn fanen DOM mutations og brug siden. Skiftende elementer blinker, og de travleste stiger til toppen af listen.
Installer DevSuite Pro gratis og lås op for 74+ udviklerværktøjer til din browser.
