Let's look at how to debug all JavaScript events and log them to the console with a nifty trick. It's for example important when debugging a web page to see how many submit events a form element sends out. With this debugging method you prevent sending and tracking multiple times. browser events Listen for all events in JavaScript There is a handy API in that makes this easy. Chrome developer tools The API allows you to log any occurring JavaScript event to the console in Chrome. You just have to give it an element and optionally the event you want to listen to: monitorEvents monitorEvents(element[,event]) If you want to stop listening for events again, you simply use: unmonitorEvents(element[,event]) : Log all of the to the console Example click events window object Now with this helpful debugging tool in our toolbox, we can for example select a form element in Chrome developer tools to start monitoring . submit events After you select the element in the elements tab, Chrome Dev Tools will show a little sign next to it. $0 If you keep the HTML-Element selected, you can now use the to quickly reference the element in the console - without needing a CSS selector. Now together with the API you can quickly and easily listen to all ongoing JavaScript events and print them to the console for debugging: $0 monitorEvents This is helpful for all kinds of because you can debug every JavaScript event in the console without having to run the . event tracking GTM Debugger So there you have it. By using Chrome Dev Tools' API, it is the quickest way to monitor all JavaScript events that I know of. Let me know on Twitter if it worked for you and if you liked this. ✌️ Previously published at https://bluerivermountains.com/en/log-all-javascript-events

Google

Twitter

Outlining Blog Posts: A 5-Step Strategy Geared for Speed 

Freelance Inquiry

Read My Stories

Freelancer inquiry

Too Long; Didn't Read

Make resilience your competitive advantage

A Simple Guide to Log JavaScript Events to the Console for Debugging

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

Outlining Blog Posts: A 5-Step Strategy Geared for Speed

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

7 Must Use Tools For Newbie Web Developers

A Beginner's Guide to Debugging With Google Chrome Dev Tools

Animating particles using React Motion

Outlining Blog Posts: A 5-Step Strategy Geared for Speed

10 Useful Tips & Tricks That Will Help You Make the Most of Chrome Devtools

7 Must Use Tools For Newbie Web Developers

A Beginner's Guide to Debugging With Google Chrome Dev Tools

Animating particles using React Motion

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps