Event Listeners skizzieren jedes Element, das über einen event listener verfügt, farbig nach Art – Klicken, Bewegen, Scrollen, Berühren, Tastatur und Formular – zeigen an, woher jeder Handler stammt, und lassen Elemente blinken, wenn sich das DOM ändert.
Herauszufinden, warum etwas reagiert – oder nicht – beginnt normalerweise mit einer Frage, die die Seite nicht beantwortet: Gibt es überhaupt einen Click-Handler für dieses Element? Welches Element ist eigentlich für das Schwebeverhalten verantwortlich? Was hört beim Scrollen zu und bringt die Seite zum Stottern? Browser DevTools kann die listeners jeweils eines Elements auflisten, wenn Sie bereits wissen, welches Element Sie auswählen müssen.
Dieses Tool beantwortet die Frage für die gesamte Seite auf einmal. Jedes Element mit einem listener erhält einen Umriss in der Farbe seiner Art – Klicken, Bewegen des Mauszeigers, Scrollen, Berühren und Ziehen, Tastatur oder Form und Fokus – und wenn Sie den Mauszeiger darüber bewegen, werden die genauen Ereignisse und deren Herkunft angezeigt: ein Inline-Attribut, eine On-Property, ein React oder Vue Handler, jQuery oder addEventListener. Kategoriekacheln schalten jede Art ein und aus, und die Liste darunter benennt jedes Element, sodass Sie mit einem Klick dorthin scrollen können.
Frameworks werden ordnungsgemäß behandelt. React hängt seine listeners an das Stammverzeichnis an und sendet Ereignisse intern, wodurch die gesamte App anklickbar aussieht. Das Tool legt diese Root-Registrierungen beiseite und zeigt die React Handler für die Elemente an, die sie deklarieren. Der Schnellscan erfordert kein Neuladen und deckt Inline-Handler, React, Vue und jQuery ab. Listeners die mit einfachem addEventListener hinzugefügt wurden, bevor das Tool geöffnet wurde, sind nur ab Beginn des Ladens einer Seite sichtbar. Daher lädt Reload & record die Seite einmal neu, wenn die Aufzeichnung aktiviert ist. Das Tool öffnet sich dann von selbst erneut, wobei alle listener eingeschlossen sind, auch solche auf Seitenebene im window und document.
Die zweite Registerkarte überwacht das DOM selbst. Jeder hinzugefügte oder entfernte Knoten, jede Attributänderung und jede Textänderung blinkt auf der Seite, die Zähler zeigen Mutationen pro Sekunde an und eine Liste ordnet die Elemente, die sich am meisten ändern, mit den beteiligten Attributen. Ein stetiger Stream, während niemand die Seite berührt, bedeutet normalerweise, dass ein Timer, eine JavaScript-gesteuerte Animation oder ein Framework mehr neu rendert, als es sollte – genau die Dinge, die Batterien entladen und Seiten zum Stottern bringen.
Elemente mit Klick-, Hover-, Scroll-, Touch-, Tastatur- und Form- listeners werden in ihrer eigenen Farbe umrandet, mit Kacheln zum Ein- oder Ausblenden jeder Art.
Inline-Attribute, On-Properties, React und Vue Handler, jQuery Ereignisse und addEventListener Aufrufe, beschriftet für jedes Element.
Die Root-Level- listeners von React werden beiseite gelegt und ihre Handler werden auf den Elementen angezeigt, die sie deklarieren, und nicht auf der gesamten App.
Reload & record fängt jeden addEventListener Aufruf ab Beginn eines Seitenladevorgangs ab, einschließlich window und document listeners, nur für diesen einen Ladevorgang.
Hinzugefügte und entfernte Knoten, Attributänderungen und Textänderungen blinken auf der Seite mit einem Mutationszähler pro Sekunde.
Eine Rangliste der Elemente, die sich am meisten ändern, einschließlich der beteiligten Attribute, weist direkt auf außer Kontrolle geratene Neudarstellungen hin.
Sehen Sie auf einen Blick, ob eine Schaltfläche tatsächlich einen listener hat oder ob der Handler stattdessen auf einem Wrapper-Element sitzt.
Finden Sie jedes Element, das auf Scrollen, Rad oder Touchmove hört, einschließlich listeners auf window und document.
Prüfen Sie, welche Steuerelemente auf Tastaturereignisse reagieren und welche nur auf die Maus.
Beobachten Sie den Mutationszähler, während die Seite inaktiv ist. Elemente, die sich ständig ändern, deuten auf einen Timer oder ein Framework hin, das zusätzliche Arbeit leistet.
Bewegen Sie den Mauszeiger über eine unbekannte Site, um zu sehen, welche Teile interaktiv sind und welches Framework sie verknüpft hat.
Klicken Sie im DevSuite Pro Dock auf das Symbol Event Listeners. Ein schneller Scan wird sofort ausgeführt und zeigt jedes gefundene Element an.
Bewegen Sie den Mauszeiger über ein umrandetes Element, um seine Ereignisse und deren Quellen anzuzeigen. Verwenden Sie die Kategoriekacheln, um nur Klick-, Hover- oder Scroll- listeners anzuzeigen.
Drücken Sie Reload & record, um die Seite bei aktivierter Aufzeichnung einmal neu zu laden. Das Tool wird von selbst erneut geöffnet und umfasst jetzt jeden addEventListener -Aufruf.
Klicken Sie auf eine Zeile in der Liste, um auf der Seite zu diesem Element zu scrollen und es zu flashen. Copy report erhalten Sie die vollständige Liste als Text.
Öffnen Sie die Registerkarte DOM mutations “ und verwenden Sie die Seite. Wechselnde Elemente blinken, und die am meisten beschäftigten Elemente rücken an die Spitze der Liste.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 74+ Entwickler-Tools für Ihren Browser frei.
