Web Inspector ReferenceURL Breakpoints

This article is a “continuation” of JavaScript breakpoints, and as such it is highly recommended that you read it before reading this article, as many concepts defined there will be referenced here without explanation.

In addition to JavaScript breakpoints, there is another type of breakpoint, called a URL breakpoint, that can be useful when debugging network requests initiated from a JavaScript API, such as XMLHttpRequest or fetch.

Configuration

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

URL breakpoints come in two forms: Containing and Matching.

  • Containing URL breakpoints, when enabled, will pause JavaScript execution before any network request is sent by a JavaScript API with a URL that contains the given text.
  • Matching URL breakpoints, when enabled, will pause JavaScript execution before any network request is sent by a JavaScript API with a URL that matches the given regular expression.

Special URL Breakpoint

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 in the top-right of the Breakpoints section in the navigation sidebar in the Sources Tab.

Written January 14, 2020 by Devin Rousso

Last updated June 8, 2020 by Devin Rousso