Web Inspector ReferenceURL Breakpoints

URL Breakpoints can be useful when debugging network requests initiated from a JavaScript API, such as XMLHttpRequest or fetch.

URL Breakpoints can be added by selecting URL Breakpoint… after clicking on the [Create Breakpoint] in the top-right of the Breakpoints section in the navigation sidebar in the Sources Tab.

All URL Breakpoints are preserved across Web Inspector sessions.

URL Breakpoints have two different types: Containing and Matching.

Containing

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

Matching

When enabled, Matching URL Breakpoints will pause 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 to Containing and Matching URL Breakpoints, there is also a special URL Breakpoint: All Requests.

When enabled, the All Requests URL Breakpoint will pause JavaScript execution whenever any network request is sent by a JavaScript API, regardless of the request’s URL.

The All Requests URL Breakpoint can be added/enabled by selecting selecting All Requests after clicking on the [Create Breakpoint] in the top-right of the Breakpoints section in the navigation sidebar in the Sources Tab.

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 :

  • the URL Breakpoint was manually disabled . Clicking (or right-clicking and selecting Enable Breakpoint or Disable Breakpoint in the context menu) on any breakpoint icon in the navigation sidebar in the Sources 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 the navigation sidebar in the Sources Tab.

All enable/disable/delete toggles are available in the context menu when right-clicking on any URL Breakpoint.

Icon legend:

  • enabled (breakpoints globally enabled)
  • disabled (breakpoints globally enabled)
  • enabled (breakpoints globally disabled)
  • disabled (breakpoints globally disabled)

Updated for Safari Technology Preview. Try it out for the latest Web Inspector features, including all of the above and more.


Written January 14, 2020 by Devin Rousso

Last updated September 8, 2020 by Devin Rousso