Web Inspector Reference Event Breakpoints

Event Breakpointscan be useful when debugging DOM interactions in JavaScript.Event Breakpointshave two different types:Global Event BreakpointsandSpecific Listener Breakpoints.

Global Event Breakpoints

TheseEvent Breakpointscan be added by clicking on the[Create Breakpoint] in the top-right of theBreakpointssection in theNavigation Sidebarin theSourcesTab.

All Animation Frames
Whenever anyrequestAnimationFramecallback is invoked, execution willpause JavaScript executioninside the callback, but before any of its code is run.
All Timeouts
Whenever anysetTimeoutcallback is invoked, execution willpause JavaScript executioninside the callback, but before any of its code is run.
All Intervals
Whenever anysetIntervalcallback is invoked, execution willpause JavaScript executioninside the callback, but before any of its code is run.
All Events
Whenever any DOM event is fired, execution willpause JavaScript executioninside the DOM event listener callback, but before any of its code is run. This includes any custom DOM event, such as those fired bydispatchEvent.
Event Breakpoint…This will have the same effect as theAll EventsEvent Breakpoint,but it will be limited to a specific DOM event name (including custom DOM event names) instead of for every DOM event.

AllGlobal Event Breakpointsare preserved across Web Inspector sessions.

Specific Listener Breakpoints

Global Event Breakpointsare 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 aclickDOM event on a specific DOM node.

In these cases, setting aGlobal Event Breakpointforclickwouldn’t be ideal, as there may be otherclickDOM events that are fired on other nodes or with other callbacks.

Additionally, setting aJavaScript Breakpointinside the code of the callback (assuming you know where it is) may also not be ideal as the callback might be used for other DOM event callbacks, or even called unrelated to DOM events.

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 theEvent Listenerssection in theNodepanelin theDetails Sidebarin theElementsTab.

TheEvent Listenerssection enumerates all of the DOM event listeners for the selected DOM node, and for all of its ancestors, and provides information about each:

Targetis a representation of the DOM node target.
Eventis the name of the DOM event.
Functionshows information about the callback, like function name and/or source code location.
Capturingwill only be shown if that specific DOM event listener was added with auseCaptureoption.
Bubblingwill only be shown if that specific DOM event listener was added without auseCaptureoption (or if it was set tofalse).
Attributewill only be shown if that specific DOM event listener was added via an HTML attribute.
Passivewill only be shown if that specific DOM event listener was added with apassiveoption.
Oncewill only be shown if that specific DOM event listener was added with aonceoption, 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 aSpecific Listener Breakpointas described above.

TheEvent Listenersection will update as DOM event listeners are added and removed, and theEnabledandBreakpointchecked state will be preserved when changing DOM nodes.

Each sub-section also has a[Options] in the top-right when hovered that provides a quick way to enable/disable or set/removeSpecific Listener Breakpointson all event listeners in that sub-section.

TheEvent Listenersection can also be changed toGroup By Targetinstead of the defaultGroup By Eventby clicking on the[Grouping Method] in the top-right.

Specific Listener Breakpointsare not preserved across Web Inspector sessions.

Configuration

Event Breakpointshave a few different configuration options, reachable by right-clicking and selectingEdit Breakpoint…in the context menu.

TheConditioninput allows you to restrict theEvent Breakpointto only pause JavaScript execution if the given JavaScript evaluates to a truthy value. This is useful for situations where you only want to pause JavaScript execution once a certain condition is met, such as a variable having a particular value. Keep in mind that the contained JavaScript is evaluated when theEvent Breakpointis reached, and may cause additional side effects depending on the code you run as your condition.

Rather than execute arbitrary code, however, you may just want to ignore the first few times theEvent Breakpointis reached. If this is the case, setting theIgnoreinput to any positive integer will prevent theEvent Breakpointfrom pausing execution until it has been reached that many times.

Now you may be wondering what’s anAction.There are four different types:

Log Message

This is basically a “shortcut” for logging values usingconsole.log.The string you provide behaves like a template literal, meaning you can evaluate arbitrary JavaScript so long as it’s inside a${…}.
Evaluate JavaScript

Arguably the most powerfulEvent BreakpointAction,it allows you to evaluate any arbitrary JavaScript whenever thatEvent Breakpointis hit. The given JavaScript is executed as if it were right before the line of code, meaning it will have access to all variables available in that scope before the related line.
Play Sound

Adding one of these will cause Web Inspector to play asystem beepsound whenever theEvent Breakpointis hit.
Probe Expression

Probe Expressions can be thought of almost like a mini-Console.Each time the relatedEvent Breakpointis hit, theProbe Expressionis evaluated and the result is saved in theProbepanel in theDetails Sidebarin theSourcesTab,allowing you to see how the result of the expression changes during the lifetime of your program. You can use this to observe changes to a specific variable (e.g.this), or to changes in an entire expression (e.g.this.foo === "bar").

If anyActionis set, you can also configure theEvent BreakpointtoAutomatically continue after evaluating.This will cause theEvent Breakpointto become effectively “invisible”, in that it will never pause execution.Event BreakpointsthatAutomatically continue after evaluatingwill have a small white triangle ( “hollow” ) in the icon:

State

Event Breakpointscan either be enabledor disabled.Ideally,Event Breakpointswill always be enabled,but there are a few reasons why they would be disabled:

theEvent Breakpointwas manually disabled.Clicking (or right-clicking and selectingEnable BreakpointorDisable Breakpointin the context menu) on any breakpoint icon in theNavigation Sidebarin theSourcesTabwill toggle between enabledand disabled.
breakpoints have been globally disabled.The global breakpoint control is a button that looks just like a breakpoint located in the top of theNavigation Sidebarin theSourcesTab.