Use the Request conditions drawer to test how your page behaves if certain resources, such as images or stylesheets, are prevented from loading or if the resources load slower.
Overview
The Request conditions drawer 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 Request conditions drawer.
The Request conditions drawer lets you:
- Add or remove patterns.
- Edit patterns.
- Remove all patterns.
- Enable or disable network request blocking or throttling. Once enabled, you can toggle blocking or throttling for an individual pattern.
Closing DevTools disables network request blocking and throttling. You have to open the panel and enable blocking again. However, DevTools saves the patterns even after the browser is closed.
Block or throttle a network request
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 or Throttle request.
- The Request conditions drawer automatically opens and lists the relevant pattern as blocked or throttled. This also automatically enables the Enable blocking and throttling checkbox.
Understand which requests are throttled or blocked
To distinguish between requests that are slow and those that are being throttled by DevTools, you can check the Network and Performance panels.
In the Network panel:
- Blocked Requests: Check the Status column. Blocked requests will explicitly show (blocked:devtools) and will be red in color.
- Throttled Requests: An icon in gold or brown will appear next to the request URL. Alternatively you can also check the Time column. The icon will appear next to the timing.
- Hover over the icon to see exactly which network condition has been applied.
- Click the icon to immediately open the Request conditions drawer and highlight the rule responsible for the throttling.
In the Performance panel: You can also look for network conditions when recording a performance profile. To do so:
- Go to the Performance panel and capture a recording.
- Locate the request in the Network track.
- Hover over the request to view a tooltip detailing the applied network conditions.
Open the Request conditions drawer
To open the Request conditions drawer:
- Open DevTools.
- Open the Command menu by pressing:
- macOS: Command+Shift+P
- Windows, Linux, ChromeOS: Control+Shift+P
- Start typing
Request conditions, select Show Request conditions, and press Enter. DevTools displays the Request conditions drawer at the bottom of your DevTools window.
Alternatively, in the top right corner, select More tools > Request conditions.
Modify a throttling setting
To customize a throttling setting:
- Open the Request conditions drawer and go to the specific request.
- In the Throttling column, select a preset (for example, Slow 3G, Fast 3G) from the drop-down menu. You can also add a custom network profile.
Modify a request pattern
To modify a pattern, in the Request conditions drawer, click the Edit button next to the pattern, edit it, and click Save. You can also click the Add condition button to create a new one.
When you enter a URL pattern, you can use wildcards (*) to match dynamic parts of the URL. For example, *://example.com will match all API requests to that domain. You can use wildcards to apply conditions to multiple resources at once using the URL Pattern API.
Toggle network request blocking
The Enable blocking and throttling checkbox lets you enable and disable network request blocking for all patterns at once.
Reorder URL matching patterns
If a request matches multiple patterns, DevTools applies the first rule found. To control this precedence, click the arrow buttons next to the specific rule in the Request conditions drawer to move high priority rules to the top of the list.
Remove a network request blocking pattern
To remove a specific network request blocking pattern from the list:
- In the Request conditions panel, click the Delete button.
To remove all network request blocking patterns, in the activity bar, click the Remove all network blocking patterns button.
