Wie man alle JavaScript Events in die Konsole loggt

author avatar
Matthias Kupperschmidt
24. September 2020
1min read

Lasst uns schauen wie man alle vorgehenden JavaScript Events in die Browser Konsole loggen kann, mit einem simplen Trick.

Es ist wichtig den Stream von Events zu überblicken, wenn man beispielsweise auf einer Webseite ein Form-Element debuggen möchte. Diese senden des öfteren mehrere Submit Events, so dass zu viele Events an Google Analytics gesendet werden.

Mit dieser Methode kannst du bei sämtlichen Problemen mit Browser Events prüfen, ob der Ursprung im Code selbst oder im Browser liegt.

All Events in JavaScript durch Event Listener loggen

Es gibt einen nützlichen API in Chrome Developer Tools, der uns dabei hilft.

Der monitorEvents API erlaubt uns alle vorgehenden JavaScript events in die Konsole zu loggen. Du musst nur ein Element und optional einen Event angeben:

monitorEvents(element[,event])

Wenn man den Event Listener beenden möchte, nutzt man folgendes:

unmonitorEvents(element[,event])

Beispiel: Wie man alle Klick-Events in die Konsole loggt

Mit dieser nützlichen Funktion können wir zum Beispiel Form Elemente in Chrome Dev Tools beobachten, um zu prüfen, ob mehrere Submit-Events gesendet werden.

Nachdem man ein Element im Elements Tab anklickt, zeigt Chrome Dev Tools ein kleines $0 Zeichen direkt daneben.

Du kannst das Element angeklickt lassen und nun $0 als Referenz zum HTML-Element nutzen, anstatt z.B. eines CSS-Selektors.

Zusammen mit dem monitorEvents API können wir also sehr schnell und einfach alle JavaScript events in der Konsole anzeigen lassen:

Diese Methode ist beim Debugging von Event Tracking sehr hilfreich, da alle JavaScript events untersucht werden können ohne zum Beispiel den GTM Debugger zu nutzen.

Das war's. Den Chrome Dev Tools API zu nutzen ist die einfachste und schnellste Methode um Events in die Konsole zu loggen.

Schreib mir auf Twitter ob's Dir geholfen hat. ✌️

author avatar
Matthias Kupperschmidt
24. September 2020
1min read
share