Sådan logger du alle JavaScript-hændelser til konsollen for debugging

Sådan logger du alle JavaScript-hændelser til konsollen for debugging

author avatar
Matthias Kupperschmidt
05. June 2024
1min read

Lad os se på, hvordan man debugger alle JavaScript-hændelser og logger dem til konsollen med et smart trick.

Det er for eksempel vigtigt, når man debugger en webside, at se hvor mange submit-hændelser et form-element sender ud.

Med denne debugging-metode forhindrer du, at browser events bliver sendt og tracket flere gange.

Lyt efter alle hændelser i JavaScript

Der er en praktisk API i Chrome Developer Tools, der gør dette nemt.

monitorEvents API'en gør det muligt at logge enhver forekommende JavaScript-hændelse til konsollen i Chrome. Du skal blot give API'en et element og *valgfrit* den hændelse, du vil lytte til:
//syntaks
//monitorEvents(element,event)
//lyt til alle hændelser
monitorEvents(window);
//stop med at lytte
unmonitorEvents(window);

For at lytte efter alle submit events vil koden se sådan ud:

//start med at lytte
monitorEvents(window,"submit");
//stop med at lytte
unmonitorEvents(window,"submit");

Bemærk, at hvis du vil stoppe med at lytte efter hændelser igen, bruger du blot unmonitorEvents.

Eksempel: Log alle click eventswindow-objektet til konsollen

Nu med dette nyttige debugging-værktøj i vores værktøjskasse kan vi for eksempel vælge et form-element i Chrome Developer Tools for at begynde at monitorere submit events.

Efter du har valgt elementet i elements-tabben, vil Chrome Dev Tools vise et lille $0 tegn ved siden af det.

Hvis du holder HTML-elementet valgt, kan du nu bruge $0 til hurtigt at referere til elementet i konsollen - uden at skulle bruge en CSS-selektor.

Nu sammen med monitorEvents API'en kan du hurtigt og nemt lytte til alle igangværende JavaScript-hændelser og udskrive dem til konsollen for debugging:

Dette er nyttigt for alle slags event tracking fordi du kan debugge hver JavaScript-hændelse i konsollen uden at skulle køre GTM Debugger.

Så der har du det. Ved at bruge Chrome Dev Tools' API er det den hurtigste måde at monitorere alle JavaScript-hændelser, som jeg kender til.

Lad mig vide på Twitter om det virkede for dig, og om du kunne lide det. ✌️

author avatar
Matthias Kupperschmidt
05. June 2024
1min read
share