Network panel: Analyze network load and resources

Dale St. Marthe

Use the Network panel to analyze page load and inspect network resources.

Overview

The Network panel lets you:

• Record network activity
• Inspect network requests
• Filter and sort network requests
• Search network headers and responses
• Change loading behavior
• Block network requests
• Change network conditions
• Debug prefetch speculation rules
• Override HTTP response headers
• Override headers for multiple URLs with wildcard characters.
• Save and export network request data

Check out Inspect network activity for a guided tutorial exploring some of the most commonly-used Network panel features.

Open the Network panel

To open the Network panel, open DevTools and then click Network located in the action bar at the top.

Alternatively, to open the Network panel through the Command menu follow these steps:

1. Open DevTools.
2. Open the Command menu by pressing:
3. macOS: Command+Shift+P
4. Windows, Linux, ChromeOS: Control+Shift+P
5. Start typing Network, select Show Network panel, and press Enter.

Record network activity

When you open DevTools, network requests are automatically recorded in the Network panel, so long as DevTools is open.

In addition to recording, you can do the following:

• Stop recording network requests.
• Clear all requests from the Requests table.
• Save requests across page loads.
• Emulate an offline experience.
• Simulate slower network connections.

Inspect network requests

All network requests are logged in the Requests table at the center of the panel.

To learn more about columns displayed by default and additional ones you can add, see View a log of requests.

Click the name of a request to see tabs with additional information on the request, including the following:

• Headers: The HTTP headers of the selected resource.
• Payload: The query string parameters and form data of a request.
• Preview: A basic rendering of the HTML.
• Response: The HTML source code of the selected resource.
• Initiator: What caused a resource to be requested.
• Timing: A breakdown of the network activity for the selected resource.
• Cookies: Cookies of a request and its response.

Filter and sort network requests

The Network panel give you two ways to sort requests in the Requests table:

• Sort by column
• Sort by activity phase.

The following are several ways to filter requests in the Requests table:

• Filter requests by properties
• Filter requests by type
• Filter requests by time
• Hide data URLs
• Hide extension URLs
• Show only the requests with blocked response cookies
• Show only blocked requests
• Show only third-party requests

Search network headers and responses

To learn how to search the HTTP headers and responses of all resources for a certain string or regular expression, see Search network headers and responses.

Change loading behavior

Test your page's user experience by changing loading behavior in the Network panel.

Using the Network panel you can do the following:

• Emulate a first-time visitor by disabling the browser cache
• Manually clear the browser cache
• Manually clear browser cookies
• Emulate offline
• Simulate a slow network connection
• Override HTTP response headers
• Override the user agent

Save and export network request data

To save and export network request data, see the following:

• Save all network requests to a HAR file
• Copy one or more requests to the clipboard