Monitor events with monitorEvents Chrome console

In my free time (usually waiting for tests to complete or webpack to compile) I like to check API documentation. The other day I was looking through the Chrome Developers tools API docs and I stumbled across the monitorEvents.

Using the monitor events method allows you to watch all or chosen events triggered on a target. A simple example of this is listening to the document body:

monitorEvents(document.body, 'click');

Then clicking on the page generates the below output:

Screen Shot 2016-07-10 at 19.31.44

The event gives some useful information such as:

  • clientx – the x point from where the click was triggered
  • clienty – the y point from where the click was triggered
  • srcElement – the source of the click, this is the DOM element from where the click was triggered, useful when trying to follow a path of events that have been triggered.

The above is just for a click event however other events such as scroll, mouseover etc will return more information on user or application interactions.

A real world usage for monitorEvents would be when debugging a page and trying to determine if a DOM node was getting events triggered on it that you did not expect or you want to find the route of the events. In some cases a third party plugin might trigger scroll or mouse events on DOM elements that you want to keep control of.

Of Course when you want to stop listening to events you can use unmonitorEvents(document.body); to stop the monitoring.




Leave a Reply

Your email address will not be published. Required fields are marked *