- Hit F12 or open Dev Tools
- Click the Sources tab
- On right-hand side, scroll down to “Event Listener”, and expand tree
- Click on the events you want to listen for.
- Interact with the target element, if they fire you will get a break point in the debugger
Similarly, you can right click on the target element -> select “inspect element” Scroll down on the right side of the dev frame, at the bottom is ‘event listeners’. Expand the tree to see what events are attached to the element.
You can use monitorEvents function.
Just inspect your element (
right mouse click →
Inspect on visible element or go to
Elementstab in Chrome Developer Tools and select wanted element) then go to
Console tab and write:
Now when you move mouse over this element, focus or click it, the name of the fired event will be displayed with its data.
To stop getting this data just write this to console:
$0 is just the last DOM element selected by Chrome Developer Tools. You can pass any other DOM object there (for example result of
You can also specify event “type” as second parameter to narrow monitored events to some predefined set. For example:
List of this available types is here.
I made a small gif that illustrates how this feature works: