Event breakpoints come in two forms: global event breakpoints and specific listener breakpoints.
These event breakpoints can be added by clicking on the in the top-right of the Breakpoints section in the navigation sidebar in the Sources Tab.
There are items for each of the four “special” Global Event Breakpoints, and one option to add a configurable Global Event Breakpoint for a given event name:
All Animation Frames
- Event Breakpoint… This will have the same effect as the All Events event breakpoint, but it will be limited to a specific DOM event name (including custom DOM event names) instead of for every DOM event.
Global event breakpoints are a great way of seeing whether a DOM event has any listeners or to debugging issues related to DOM event dispatch ordering (e.g. capturing vs. bubbling).
But sometimes, the issue is related to a specific DOM event listener, like a specific callback for a
click DOM event on a specific DOM node.
In these cases, setting a global event breakpoint for
click wouldn’t be ideal, as there may be other
click DOM events that are fired on other nodes or with other callbacks.
The ideal solution would be to be able to set a breakpoint on the callback such that it only fires when that callback is invoked in response to the specific DOM event being fired on the specific DOM node.
This can be done in Web Inspector from the Event Listeners section in the Node panel in the details sidebar in the Elements Tab.
The Event Listeners section enumerates all of the DOM evnet listeners for the selected DOM node, and for all of its ancestors, and provides information about each:
- Target is a representation of the DOM node target.
- Event is the name of the DOM event.
- Function shows information about the callback, like function name and/or source code location.
- Capturing will only be shown if that specific DOM event listener was added with a
- Bubbling will only be shown if that specific DOM event listener was added without a
useCaptureoption (or if it was set to
- Attribute will only be shown if that specific DOM event listener was added via an HTML attribute.
- Passive will only be shown if that specific DOM event listener was added with a
- Once will only be shown if that specific DOM event listener was added with a
onceoption, which means that the specific DOM event listener will be automatically removed after it’s executed.
In addition to this information, there are also two checkboxes:
- Enabled, when unchecked, will prevent that specific DOM event listener for that specific DOM event for that specific DOM node from ever being fired, effectively “removing” the DOM event listener entirely.
- Breakpoint, when checked, will set a specific listener breakpoint as described above.
The Event Listener section will update as DOM evnet listeners are added and removed, and the Enabled and Breakpoint checked state will be preserved when changing DOM nodes.
Each sub-section also has a in the top-right when hovered that provides a quick way to enable/disable or set/remove specific listener breakpoints on all event listeners in that sub-section.
The Event Listener section can also be changed to Group By Target instead of the default Group By Event by clicking on the in the top-right.
Specific listener breakpoints are not preserved across Web Inspector sessions.