Monitor Events with Chrome Dev Tools

When developing a web application, it can sometimes become useful to inspect an element in dev tools to see what events are attached to it. To monitor events on a particular element, the monitorEvents() function can be used. Once run, the function will write out an event object and all of its associated data to the console when the event is triggered. see the code below for more information.


//The function below allows you to monitor all events attached to a particular node/element. 

monitorEvents() 


/*
The function can take two properties to filter down your search, the first property is an HTML ID and can be used to target a specific element. The second property allows you to filter the different types of events.

The console will log the event object, allowing you to easily see its properties.  
*/
monitorEvents(document.body, 'click')


/* You can also select a particular element first using inspect, on chrome dev tools and then type the following to see all of the events associated with the element. */
monitorEvents($0)

/* The log can be stopped by typing the following into the console */
unmonitorEvents()