Web Inspector Reference URL Breakpoints

URL Breakpoints can be useful when debugging network requests initiated from a JavaScript API, such asXMLHttpRequest orfetch.

URL Breakpoints can be added by selectingURL Breakpoint… after clicking on the [Create Breakpoint] in the top-right of theBreakpoints section in theNavigation Sidebar in theSources Tab.

AllURL Breakpoints are preserved across Web Inspector sessions.

URL Breakpoints have two different types:Containing andMatching.

Containing

When enabled,ContainingURL Breakpoints willpause JavaScript execution before any network request is sent by a JavaScript API with a URL that contains the given text.

Matching

When enabled,MatchingURL Breakpoints willpause JavaScript execution before any network request is sent by a JavaScript API with a URL that matches the given regular expression.

Special Breakpoints

In addition toContaining andMatchingURL Breakpoints, there is also a specialURL Breakpoint:All Requests.

When enabled, theAll RequestsURL Breakpoint willpause JavaScript execution whenever any network request is sent by a JavaScript API, regardless of the request’s URL.

TheAll RequestsURL Breakpoint can be added/enabled by selecting selectingAll Requests after clicking on the [Create Breakpoint] in the top-right of theBreakpoints section in theNavigation Sidebar in theSources Tab.

Configuration

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

TheCondition input allows you to restrict theURL Breakpoint to 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 theURL Breakpoint is 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 theURL Breakpoint is reached. If this is the case, setting theIgnore input to any positive integer will prevent theURL Breakpoint from 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 powerfulURL BreakpointAction, it allows you to evaluate any arbitrary JavaScript whenever thatURL Breakpoint is 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 beep sound whenever theURL Breakpoint is hit.
Probe Expression
Probe Expression s can be thought of almost like a mini-Console. Each time the relatedURL Breakpoint is hit, theProbe Expression is evaluated and the result is saved in theProbe panel in theDetails Sidebar in theSources Tab, 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 anyAction is set, you can also configure theURL Breakpoint toAutomatically continue after evaluating. This will cause theURL Breakpoint to become effectively “invisible”, in that it will never pause execution.URL Breakpoints thatAutomatically continue after evaluating will have a small white triangle (“hollow”) in the icon:

State

URL Breakpoints can either be enabled or disabled. Ideally,URL Breakpoints will always be enabled, but there are a few reasons why they would be disabled:

theURL Breakpoint was manually disabled. Clicking (or right-clicking and selectingEnable Breakpoint orDisable Breakpoint in the context menu) on any breakpoint icon in theNavigation Sidebar in theSources Tab will toggle between enabled and 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 Sidebar in theSources Tab.