Dale St. Marthe

Use theNetwork request blocking panel to test how your page behaves if certain resources, such as images or stylesheets, are prevented from loading.

Overview

TheNetwork 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 theNetwork panel and the respective patterns will appear in theNetwork request blocking panel.

TheNetwork 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 theNetwork request blocking panel:

1. Open DevTools.
2. Open theCommand menu by pressing:
   • macOS:Command+Shift+P
   • Windows, Linux, ChromeOS:Control+Shift+P
3. Start typingNetwork request blocking, selectShow Network request blocking, and pressEnter. DevTools displays theNetwork request blocking panel at the bottom of your DevTools window.

Alternatively, in the top right corner, selectmore_vertMore options >More tools >Network request blocking.

Block a network request

There are two ways to block a network request. First:

1. In theNetwork request blocking panel, clickaddAdd 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.

2. ClickAdd and make sure theEnable network request blocking checkbox is checked.

3. Reload the page. TheNetwork request blocking panel shows the number of requests blocked next to the pattern.

Secondly, you can block network requests from theNetwork panel in DevTools.

1. In theNetwork panel, under theName section, right-click a request and selectBlock request URL orBlock request domain.
2. TheNetwork request blocking panel automatically opens and lists the relevant pattern as blocked.
3. Make sure theEnable network request blocking checkbox is checked.
4. 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 theNetwork request blocking panel, hover over a pattern.
• Click thedeleteDelete button.

To remove all network request blocking patterns, in the activity bar, click theblockRemove all network blocking patterns button.

Modify a network blocking request pattern

To modify a pattern, in theNetwork request blocking panel, click theeditEdit button next to the pattern, edit it, and clickSave.

Toggle network request blocking

Thecheck_boxEnable network request blocking checkbox lets you enable and disable network request blocking for all patterns at once.