DevTools Tips

Categories: Supported by:

Monitor all events dispatched on an element

You can use the monitorEvents global function in the Console panel to log all of the events dispatched on a particular element.

  1. Select an element in the Elements panel.
  2. Go to the Console.
  3. Type monitorEvents($0, 'key'); and hit Enter.
  4. Interact with the selected element in the page to dispatch events.

You can replace $0 with a reference to any other element. $0 is just a shortcut to the currently selected element.

You can also change key to other event types like mouse.

GIF animation showing how events get automatically logged when using the monitorEvents function

Thank you to Minko Gechev for tweeting about this tip.