Event Listeners beskriver varje element som har en event listener, färgad efter typ - klicka, hovra, rulla, peka, tangentbord och formulär - visar var varje hanterare kom ifrån, och blinkar element när DOM ändras.
Att ta reda på varför något reagerar – eller inte – börjar vanligtvis med en fråga som sidan inte kommer att svara på: finns det en klickhanterare på detta element överhuvudtaget? Vilket element äger egentligen hovringsbeteendet? Vad är att lyssna på att scrolla och få sidan att stamma? Browser DevTools kan lista listeners på ett element i taget, om du redan vet vilket element du ska välja.
Det här verktyget svarar på frågan för hela sidan på en gång. Varje element med en listener får en kontur i färgen av sitt slag - klicka, sväva, rulla, peka och dra, tangentbord eller form och fokusera - och om du håller musen över ett visar de exakta händelserna och var var och en kom ifrån: ett inline-attribut, en on-property, en React eller Vue hanterare, jQuery eller addEventListener. Kategoribrickor slår på och av varje typ, och listan under namnger varje element, så ett klick rullar dig till det.
Ramar hanteras korrekt. React kopplar sina listeners till roten och skickar händelser internt, vilket skulle få hela appen att se klickbar ut; verktyget lägger dessa rotregistreringar åt sidan och visar React hanterarna på de element som deklarerar dem. Snabbskanningen behöver ingen omladdning och täcker inline-hanterare, React, Vue och jQuery. Listeners som lagts till med vanlig addEventListener innan verktyget öppnades kan bara ses från början av en sidladdning, så Reload & record laddar om sidan en gång med inspelning på - verktyget öppnas sedan igen av sig självt med alla inkluderade listener, de på sidnivå i window och document också.
Den andra fliken bevakar själva DOM. Varje tillagd eller borttagen nod, attributändring och textändring blinkar på sidan, räknarna visar mutationer per sekund, och en lista rangordnar de element som förändras mest, med de inblandade attributen. En stadig ström medan ingen rör sidan betyder vanligtvis en timer, en JavaScript-driven animation eller ett ramverk som återrenderar mer än det borde – precis de saker som tömmer batterierna och får sidor att stamma.
Element med klick-, sväv-, rull-, pek-, tangentbords- och listeners visas i sin egen färg, med brickor för att visa eller dölja varje typ.
Inline-attribut, on-properties, React och Vue hanterare, jQuery händelser och addEventListener anrop, märkta på varje element.
React listeners på rotnivå ställs åt sidan, och dess hanterare visas på de element som deklarerar dem snarare än på hela appen.
Reload & record fångar varje addEventListener listeners från början av en sidladdning, inklusive window och document, endast för den ena laddningen.
Tillagda och borttagna noder, attributändringar och textändringar blinkar på sidan, med en räknare för mutationer per sekund.
En rankad lista över de element som förändras mest, med de inblandade attributen, pekar direkt på skenande omrenderingar.
Se med ett ögonkast om en knapp faktiskt har en listener eller om hanteraren sitter på ett omslagselement istället.
Hitta alla element som du lyssnar på för att rulla, rulla eller trycka på, inklusive listeners på window och document.
Kontrollera vilka kontroller som svarar på tangentbordshändelser och vilka som bara svarar på musen.
Titta på mutationsräknaren medan sidan är inaktiv; element som hela tiden förändras pekar mot att en timer eller ett ramverk gör extra arbete.
Håll muspekaren runt en obekant webbplats för att se vilka delar som är interaktiva och vilket ramverk som kopplade upp dem.
Klicka på ikonen Event Listeners i DevSuite Pro dockan. En snabbskanning körs omedelbart och beskriver varje element som den hittar.
Håll muspekaren över ett skisserat element för att se dess händelser och deras källor. Använd kategoribrickorna för att endast visa listeners som klickar, svävar eller rullar.
Tryck på Reload & record för att ladda om sidan en gång med inspelning på. Verktyget öppnas igen av sig själv och inkluderar nu varje addEventListener anrop.
Klicka på en rad i listan för att rulla sidan till det elementet och flasha det. Copy report ger dig hela listan som text.
Öppna fliken DOM mutations och använd sidan. Ändring av element blinkar, och de mest trafikerade hamnar högst upp på listan.
Installera DevSuite Pro gratis och lås upp 74+ utvecklarverktyg för din webbläsare.
