Use the Network request blocking panel to test how your page behaves if certain resources, such as images or stylesheets, are prevented from loading.
Overview
The Network request blocking panel lets you block multiple resources or "patterns" at the same time and toggle them from a list. You can also block network request domains or URLs from the Network panel and the respective patterns will appear in the Network request blocking panel.
The Network request blocking panel lets you:
- Add or remove patterns.
- Edit patterns.
- Remove all patterns.
- Enable or disable network request blocking. Once enabled, you can toggle blocking for an individual pattern.
Closing DevTools disables network request blocking. You have to open the panel and enable blocking again. However, DevTools saves the patterns even after the browser is closed.
Open the Network request blocking panel
To open the Network request blocking panel:
- Open DevTools.
- Open the Command menu by pressing:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Start typing
Network request blocking, select Show Network request blocking, and press Enter. DevTools displays the Network request blocking panel at the bottom of your DevTools window.
Alternatively, in the top right corner, select More options > More tools > Network request blocking.
Block a network request
There are two ways to block a network request. First:
In the Network request blocking panel, click Add pattern. An input box appears prompting you to enter a "Text pattern to block matching requests."
You can enter any of the following:
- A full URL.
- A partial URL with an asterisk "
*" for wildcard pattern matching. - A domain name. This blocks all requests containing this domain.
Click Add and make sure the Enable network request blocking checkbox is checked.
Reload the page. The Network request blocking panel shows the number of requests blocked next to the pattern.
Secondly, you can block network requests from the Network panel in DevTools.
- In the Network panel, under the Name section, right-click a request and select Block request URL or Block request domain.
- The Network request blocking panel automatically opens and lists the relevant pattern as blocked.
- Make sure the Enable network request blocking checkbox is checked.
- Reload the page to see the number of blocked requests next to the corresponding pattern.
The number of blocked requests may update as more requests are made. Refreshing the page resets the numbers.
Remove a network request blocking pattern
To remove a specific network request blocking pattern from the list:
- In the Network request blocking panel, hover over a pattern.
- Click the Delete button.
To remove all network request blocking patterns, in the activity bar, click the Remove all network blocking patterns button.
Modify a network blocking request pattern
To modify a pattern, in the Network request blocking panel, click the Edit button next to the pattern, edit it, and click Save.
Toggle network request blocking
The Enable network request blocking checkbox lets you enable and disable network request blocking for all patterns at once.