How to Set XHR/Fetch Breakpoints in Firefox

This article provides a step-by-step guide on how developers can debug network requests in the Firefox Web Browser using XHR and Fetch breakpoints. By filtering for specific URL substrings within the Firefox Developer Tools, you can automatically pause JavaScript execution the exact moment a matching network call is initiated, allowing you to easily trace the call stack and inspect the application's state.

1. Open the Firefox Debugger

To begin, open the web page you want to debug in Firefox. Open the Developer Tools by pressing F12, or by using the keyboard shortcut Ctrl + Shift + I on Windows/Linux or Cmd + Option + I on macOS. Once the toolbox opens, click on the Debugger tab.

2. Locate the XHR Breakpoints Panel

Inside the Debugger interface, look at the panes on the side (typically on the left or right, depending on your layout configuration). Scroll down until you see the collapsible section labeled XHR Breakpoints. Note that while the UI only says "XHR", breakpoints set here will intercept both traditional XMLHttpRequest calls and modern fetch() requests.

Click on the XHR Breakpoints header to expand the panel if it is not already open.

3. Add a URL Substring

With the XHR Breakpoints panel expanded, follow these steps to target your specific request:

  1. Click the + (Plus) icon located on the right side of the XHR Breakpoints header, or click directly inside the input field labeled Break when URL contains.
  2. Type the specific substring of the URL you want to intercept (for example, /api/v1/users or graphql). You do not need to enter the full URL.
  3. Press Enter to save the breakpoint.

Once added, the substring will appear in a list with a checked box next to it, indicating that the breakpoint is active.

4. Trigger the Request and Inspect

Interact with your web application to trigger the network request. As soon as your code attempts to make an XHR or Fetch request containing your specified URL substring, Firefox will immediately pause JavaScript execution.

The Debugger will highlight the exact line of code—such as xhr.send() or fetch()—that initiated the request. From here, you can:

  • Check the Call Stack: View the Call stack panel to see the sequence of functions that led to the network request.
  • Inspect Scopes: Look at the Scopes panel to view the local and global variables at the exact moment the request was made.
  • Step Through Code: Use the stepping controls at the top of the pane to step over, into, or out of functions to observe how the request data is handled.

5. Managing Your Breakpoints

  • Pause on Any Request: If you want to pause execution on every single network request regardless of the URL, simply check the box labeled Pause on any URL at the top of the XHR Breakpoints panel.
  • Disable Temporarily: Uncheck the box next to your URL substring to temporarily disable the breakpoint without deleting it.
  • Remove: Hover over the URL substring in the list and click the × (Close) button that appears on the right to delete the breakpoint entirely.