The monitorEvents() console method in webkit/blink browsers

My friend Steve Griffith has started an excellent series on dev tools and the browser developer console.

Last week, he released a video on a webkit/blink-only feature (so, MS Edge, Chrome, and Safari, but not Firefox) called monitorEvents().

How it works

The monitorEvents() method lets you watch for events on an element, and will log the event (and details about it) to the console.

You pass in the element to monitor as an argument. You can optionally specific a specific event to listen for as a second argument.

// This will log all events on the body
monitorEvents(document.body);

// This will log only click events on the #main element
var main = document.querySelector('#main');
monitorEvents(main, 'click');

At any point, you can stop monitoring events with the unmonitorEvents() method.

Pass in just the element to stop watching all events, or add a second optional argument with the specific event you want to stop monitoring.

// This will stop monitoring all events on the body
unmonitorEvents(document.body);

// This will stop watching only click events
unmonitorEvents(document.body, 'click');

This seems super handy, and I wish I knew about it sooner!