Sådan logger du alle JavaScript-hændelser til konsollen for debugging
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:For at lytte efter alle submit events vil koden se sådan ud:
Bemærk, at hvis du vil stoppe med at lytte efter hændelser igen, bruger du blot unmonitorEvents
.
Eksempel: Log alle click events på window-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. ✌️