Viewing Events Fired on Elements with Chrome DevTools

To troubleshoot and optimize event handling on your web pages, you can use Chrome DevTools to inspect the events triggered on specific elements.

Execute the following steps using Chrome Web Developer:

1. Inspect the Element:

   • Right-click on the target element and select "Inspect" or navigate to the "Elements" tab in DevTools.

2. Monitor Events:

   • Using monitorEvents:

     • Open the "Console" tab.
     • Enter monitorEvents($0) in the console, where $0 represents the selected element.

   • Specifying Event Type:

     • Optionally, provide the event type you want to monitor as a second argument to monitorEvents, e.g., monitorEvents(document.body, 'mouse').

Interactions with the inspected element will now display their event names and associated data.

3. Stop Monitoring:

   • To discontinue event monitoring, enter unmonitorEvents($0) in the console.

Available Event Types (as of 2023-01-30)

You can narrow down monitored events by specifying the following types:

• mouse: mouse events (down, up, click, etc.)
• key: keyboard events (down, up, press, etc.)
• touch: touch events (start, move, end, etc.)
• control: element control events (resize, focus, change, etc.)