How do I view events fired on an element in Chrome DevTools?

Console utilities for event diagnoses

Take your event investigation a notch higher by using the monitorEvents() function in the Console tab of DevTools. With this utility, you have Sherlock-level observation on all the events an element emits.

// Unleash your inner Holmes on all events related to the selected element
monitorEvents($0);


To end your espionage, simply type:

// Stops the Sherlock mode
unmonitorEvents($0);


You can make your monitoring more specific by indicating an event type:

// Limits your investigation to just mouse events
monitorEvents($0, 'mouse');


Event types dissected

Deep diving into event types can significantly boost your ability to debug efficiently:

- **Mouse**: Relates to `click`, `dblclick`, `mouseup`, `mousedown`.
- **Key**: Covers `keydown`, `keyup`.
- **Touch**: Packed with touch-associated events for mobile.
- **Control**: Includes focus, blur, scroll, resize.

Ways around monitoring custom events

Working with custom events or a library like jQuery may require an approach beyond regular DevTools event monitoring. Custom events, particularly those sparked by scripts, might remain elusive.

Here's how you can approach this:

• Check the script for event names.
• Implement live() or on() handy jQuery methods and set breakpoints in the handlers.
• Visual Event, a bookmarklet utility, is handy for detecting handlers linked to DOM elements.
• For jQuery-related events, use the console command $._data($0, 'events') to expose the associated events and handlers.

Picking apart event handlers

If you're looking for the script that manages the event, follow the event handler's pathway back to its origin:

1. Right-click the function under the Event Listeners section.
2. Opt for 'Go to function definition'.
3. DevTools exposes the source code.

Diving deep into form events

When it comes to events attached with form elements, things can get complicated with validation activities or interaction with external libraries:

• Analyze the methods by which frameworks link events to form controls.
• Identify hidden event listeners with the help of utility functions.
• Libraries could wrap or delegate events making it necessary to manually debug or seek guidance from community forums and related documentation.