Event Listeners schetst elk element dat een event listener heeft, gekleurd naar soort (klik, zweef, scroll, tik, toetsenbord en formulier) en laat zien waar elke handler vandaan komt, en flitsende elementen als de DOM verandert.
Uitzoeken waarom iets reageert – of niet – begint meestal met een vraag die de pagina niet beantwoordt: is er überhaupt een klikhandler voor dit element? Welk element is eigenlijk eigenaar van het zweefgedrag? Wat is luisteren naar scrollen en de pagina laten stotteren? Browser DevTools kan de listeners van één element tegelijk weergeven, als u al weet welk element u moet selecteren.
Deze tool beantwoordt de vraag voor de hele pagina in één keer. Elk element met een listener krijgt een omtrek in de kleur van zijn soort – klikken, zweven, scrollen, aanraken en slepen, toetsenbord, of formulier en focus – en als je er één zweeft, worden de exacte gebeurtenissen weergegeven en waar ze vandaan komen: een inline attribuut, een on-property, een React of Vue handler, jQuery of addEventListener. Categorietegels schakelen elke soort aan en uit, en de lijst eronder geeft elk element een naam, zodat u met één klik ernaartoe scrollt.
Er wordt goed omgegaan met raamwerken. React koppelt zijn listeners aan de root en verzendt intern gebeurtenissen, waardoor de hele app er klikbaar uitziet; de tool zet die rootregistraties opzij en toont de React handlers voor de elementen die ze declareren. De quickscan hoeft niet opnieuw te worden geladen en omvat inline handlers, React, Vue en jQuery. Listeners die zijn toegevoegd met gewone addEventListener voordat de tool werd geopend, kunnen alleen worden gezien vanaf het begin van het laden van een pagina, dus Reload & record herlaadt de pagina één keer terwijl de opname is ingeschakeld - de tool opent vervolgens vanzelf opnieuw met elke listener inbegrepen, ook op paginaniveau in window en document.
Het tweede tabblad bekijkt de DOM zelf. Elk toegevoegd of verwijderd knooppunt, attribuutwijziging en tekstwijziging knippert op de pagina, de tellers tonen mutaties per seconde en een lijst rangschikt de elementen die het meest veranderen, met de betrokken attributen. Een gestage stroom terwijl niemand de pagina aanraakt, betekent meestal een timer, een JavaScript-gestuurde animatie of een raamwerk dat meer opnieuw wordt weergegeven dan zou moeten - precies de dingen die de batterijen leegmaken en pagina's laten stotteren.
Elementen met klik-, zweef-, scroll-, aanrakings-, toetsenbord- en listeners zijn omlijnd in hun eigen kleur, met tegels om elke soort te tonen of te verbergen.
Inline-attributen, on-properties, React en Vue handlers, jQuery gebeurtenissen en addEventListener aanroepen, gelabeld op elk element.
listeners op rootniveau van React worden opzij gezet en de handlers ervan worden weergegeven op de elementen die ze declareren in plaats van op de hele app.
Reload & record vangt elke addEventListener aanroep op vanaf het begin van het laden van een pagina, inclusief window en document listeners, alleen voor die ene laadbeurt.
Toegevoegde en verwijderde knooppunten, attribuutwijzigingen en tekstwijzigingen knipperen op de pagina, met een teller voor mutaties per seconde.
Een gerangschikte lijst van de elementen die het meest veranderen, met de betrokken attributen, wijst rechtstreeks op op hol geslagen herweergaven.
Zie in één oogopslag of een knop daadwerkelijk een listener heeft, of dat de handler in plaats daarvan op een wrapper-element zit.
Vind elk element dat luistert naar scrollen, wiel of touchmove, inclusief listeners op window en document.
Controleer welke besturingselementen reageren op toetsenbordgebeurtenissen en welke alleen op de muis reageren.
Bekijk de mutatieteller terwijl de pagina inactief is; elementen die steeds veranderen wijzen op een timer of een raamwerk dat extra werk doet.
Beweeg rond een onbekende site om te zien welke onderdelen interactief zijn en welk raamwerk ze heeft aangesloten.
Klik op het pictogram Event Listeners in het DevSuite Pro dock. Een snelle scan wordt onmiddellijk uitgevoerd en schetst elk gevonden element.
Beweeg de muis over een omlijnd element om de gebeurtenissen en hun bronnen te zien. Gebruik de categorietegels om alleen listeners voor klikken, zweven of scrollen weer te geven.
Druk op Reload & record om de pagina één keer opnieuw te laden terwijl de opname is ingeschakeld. De tool wordt vanzelf opnieuw geopend en omvat nu elke addEventListener aanroep.
Klik op een rij in de lijst om op de pagina naar dat element te scrollen en het te flashen. Copy report geeft u de volledige lijst als tekst.
Open het tabblad DOM mutations en gebruik de pagina. Veranderende elementen knipperen en de drukste komen bovenaan de lijst te staan.
Installeer DevSuite Pro gratis en ontgrendel 74+ ontwikkelaarstools voor uw browser.
