Network features reference

Discover new ways to analyze how your page loads in this comprehensive reference of Chrome DevTools network analysis features.

# Record network requests

By default, DevTools records all network requests in the Network panel, so long as DevTools is open.

# Stop recording network requests

To stop recording requests:

• Click Stop recording network log on the Network panel. It turns grey to indicate that DevTools is no longer recording requests.
• Press Command> + E (Mac) or Control + E (Windows, Linux) while the Network panel is in focus.

# Clear requests

Click Clear on the Network panel to clear all requests from the Requests table.

# Save requests across page loads

To save requests across page loads, check the Preserve log checkbox on the Network panel. DevTools saves all requests until you disable Preserve log.

# Capture screenshots during page load

Capture screenshots to analyze what users see as they wait for your page to load.

To enable screenshots, open Settings inside the Network panel and check Capture screenshots.

Reload the page while the Network panel is in focus to capture screenshots.

Once captured, you can interact with screenshots in the following ways:

• Hover over a screenshot to view the point at which that screenshot was captured. A yellow line appears on the Overview pane.
• Click a screenshot's thumbnail to filter out any requests that occurred after the screenshot was captured.
• Double-click a thumbnail to zoom in on it.

# Replay XHR request

To replay an XHR request, do one of the following in the Requests table:

• Select the request and press R.
• Right-click the request and select Replay XHR.

# Change loading behavior

# Emulate a first-time visitor by disabling the browser cache

To emulate how a first-time user experiences your site, check the Disable cache checkbox. DevTools disables the browser cache. This more accurately emulates a first-time user's experience, because requests are served from the browser cache on repeat visits.

# Disable the browser cache from the Network conditions drawer

If you want to disable the cache while working in other DevTools panels, use the Network conditions drawer.

1. Click the icon to open the Network Conditions drawer.
2. Check or uncheck the Disable cache checkbox.

# Manually clear the browser cache

To manually clear the browser cache at any time, right-click anywhere in the Requests table and select Clear browser cache.

# Emulate offline

There's a new class of web apps, called Progressive Web Apps, which can function offline with the help of service workers. When you're building this type of app, it's useful to be able to quickly simulate a device that has no data connection.

To simulate a completely offline network experience, select Offline from the Network throttling drop-down menu next to the Disable cache checkbox.

DevTools displays a warning icon next to the Network tab to remind you that offline is enabled.

# Emulate slow network connections

To emulate slow 3G, fast 3G, and other connection speeds, select the corresponding options from the Throttling menu.

DevTools displays a warning icon next to the Network tab to remind you that throttling is enabled.

# Create custom throttling profiles

In addition to presets, such as slow or fast 3G, you can also add your own custom throttling profiles:

1. Open the Throttling menu and select Custom > Add....

2. Set up a new throttling profile as described in Settings > Throttling.

3. Back on the Network panel, select your new profile from the Throttling drop-down menu.

   

DevTools displays a warning icon next to the Network panel to remind you that throttling is enabled.

# Throttle WebSocket connections

In addition to HTTP requests, DevTools throttles WebSocket connections since version 99.

To observe WebSocket throttling:

1. Initiate a new connection, for example, by using a test tool.
2. On the Network panel, select No throttling and send a message through the connection.
3. Create a very slow custom throttling profile, for example, 10 kbit/s. Such a slow profile will help you notice the difference.
4. On the Network panel, select the profile and send another message.
5. Toggle the WS filter, click your connection name, open the Messages tab, and check the time difference between sent and echoed messages with and without throttling. For example:

# Emulate slow network connections from the Network conditions drawer

If you want to throttle the network connection while working in other DevTools panels, use the Network conditions drawer.

1. Click the icon to open the Network Conditions drawer.
2. Select your desired connection speed from the Network throttling menu.

# Manually clear browser cookies

To manually clear browser cookies at any time, right-click anywhere in the Requests table and select Clear browser cookies.

# Override the user agent

To manually override the user agent:

1. Click the icon to open the Network Conditions drawer.
2. Uncheck Select automatically.
3. Choose a user agent option from the menu, or enter a custom one in the text box.

# Filter requests

# Filter requests by properties

Use the Filter text box to filter requests by properties, such as the domain or size of the request.

If you can't see the text box, the Filters pane is probably hidden. See Hide the Filters pane.

To invert your filter, check the Invert checkbox next to the Filter text box.

You can use multiple properties simultaneously by separating each property with a space. For example, mime-type:image/gif larger-than:1K displays all GIFs that are larger than one kilobyte. These multi-property filters are equivalent to AND operations. OR operations are currently not supported.

Below is a complete list of supported properties.

• cookie-domain. Show the resources that set a specific cookie domain.
• cookie-name. Show the resources that set a specific cookie name.
• cookie-path. Show the resources that set a specific cookie path.
• cookie-value. Show the resources that set a specific cookie value.
• domain. Only display resources from the specified domain. You can use a wildcard character (*) to include multiple domains. For example, *.com displays resources from all domain names ending in .com. DevTools shows a populates the autocomplete drop-down menu with all of the domains it has encountered.
• has-response-header. Show the resources that contain the specified HTTP response header. DevTools populates the autocomplete drop-down with all of the response headers that it has encountered.
• is. Use is:running to find WebSocket resources.
• larger-than. Show resources that are larger than the specified size, in bytes. Setting a value of 1000 is equivalent to setting a value of 1k.
• method. Show resources that were retrieved over a specified HTTP method type. DevTools populates the autocomplete drop-down with all of the HTTP methods it has encountered.
• mime-type. Show resources of a specified MIME type. DevTools populates the autocomplete drop-down with all MIME types it has encountered.
• mixed-content. Show all mixed content resources (mixed-content:all) or just the ones that are currently displayed (mixed-content:displayed).
• priority. Show resources whose priority level matches the specified value.
• resource-type. Show resources of a resource type, e.g. image. DevTools populates the autocomplete drop-down with all resource types it has encountered.
• response-header-set-cookie. Show raw Set-Cookie headers in the Issues tab. Malformed cookies with incorrect Set-Cookie headers will be flagged in the Network panel.
• scheme. Show resources retrieved over unprotected HTTP (scheme:http) or protected HTTPS (scheme:https).
• set-cookie-domain. Show the resources that have a Set-Cookie header with a Domain attribute that matches the specified value. DevTools populates the autocomplete with all of the cookie domains that it has encountered.
• set-cookie-name. Show the resources that have a Set-Cookie header with a name that matches the specified value. DevTools populates the autocomplete with all of the cookie names that it has encountered.
• set-cookie-value. Show the resources that have a Set-Cookie header with a value that matches the specified value. DevTools populates the autocomplete with all of the cookie values that it has encountered.
• status-code. Only show resources whose HTTP status code match the specified code. DevTools populates the autocomplete drop-down menu with all of the status codes it has encountered.
• url. Show the resources that have a url matching the specified value.

# Filter requests by type

To filter requests by request type, click the All, Fetch/XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Wasm (WebAssembly), Manifest, or Other (any other type not listed here) buttons on the Network panel.

If you can't see these buttons, the Filters pane is probably hidden. See Hide the Filters pane.

To enable multiple type filters simultaneously, hold Command (Mac) or Control (Windows, Linux) and then click.

# Filter requests by time

Click and drag left or right on the Overview pane to display only the requests that were active during that time frame. The filter is inclusive. Any request that was active during the highlighted time is shown.

# Hide data URLs

Data URLs are small files embedded into other documents. Any request that you see in the Requests table that starts with data: is a data URL.

Check the Hide data URLs checkbox to hide these requests.

The status bar at the bottom displays the number of the shown requests out of the total.

# Sort requests

By default, the requests in the Requests table are sorted by initiation time, but you can sort the table using other criteria.

# Sort by column

Click the header of any column in the Requests table to sort requests by that column.

# Sort by activity phase

To change how the Waterfall sorts requests, right-click the header of the Requests table, hover over Waterfall, and select one of the following options:

• Start Time. The first request that was initiated is at the top.
• Response Time. The first request that started downloading is at the top.
• End Time. The first request that finished is at the top.
• Total Duration. The request with the shortest connection setup and request / response is at the top.
• Latency. The request that waited the shortest time for a response is at the top.

These descriptions assume that each respective option is ranked from shortest to longest. Clicking on the Waterfall column's header reverses the order.

In this example, the Waterfall is sorted by total duration. The lighter portion of each bar is time spent waiting. The darker portion is time spent downloading bytes.

# Analyze requests

So long as DevTools is open, it logs all requests in the Network panel. Use the Network panel to analyze requests.

# View a log of requests

Use the Requests table to view a log of all requests made while DevTools has been open. Clicking or hovering over requests reveals more information about them.

The Requests table displays the following columns by default:

• Name. The filename of, or an identifier for, the resource.
• Status. This column can show the following values:
  • HTTP status code, for example, 200 or 404.
  • CORS error for requests failed due to Cross-Origin Resource Sharing (CORS).
  • Generic (failed) or (blocked:origin) for other requests.
• Type. The MIME type of the requested resource.
• Initiator. The following objects or processes can initiate requests:
  • Parser. Chrome's HTML parser.
  • Redirect. An HTTP redirect.
  • Script. A JavaScript function.
  • Other. Some other process or action, such as navigating to a page via a link or entering a URL in the address bar.
• Size. The combined size of the response headers plus the response body, as delivered by the server.
• Time. The total duration, from the start of the request to the receipt of the final byte in the response.
• Waterfall. A visual breakdown of each request's activity.

# Add or remove columns

Right-click the header of the Requests table and select an option to hide or show it. Currently displayed options have check marks next to them.

# Add custom columns

To add a custom column to the Requests table:

1. Right-click the header of the Requests table and select Response Headers > Manage Header Columns.
2. In the dialog window, click Add custom header, enter its name, and click Add.

# Group requests by inline frames

If inline frames on a page initiate a lot of requests, you can make the request log frendlier by grouping them.

To group requests by iframes, open Settings inside the Network panel and check Group by frame.

To view a request initiated by an inline frame, expand it in the request log.

# View the timing of requests in relation to one another

Use the Waterfall to view the timing of requests in relation to one another. By default, the Waterfall is organized by the start time of the requests. So, requests that are farther to the left started earlier than those that are farther to the right.

See Sort by activity phase to see the different ways that you can sort the Waterfall.

# Analyze the messages of a WebSocket connection

To view the messages of a WebSocket connection:

1. Under the Name column of the Requests table, click the URL of the WebSocket connection.
2. Click the Messages tab. The table shows the last 100 messages.

To refresh the table, re-click the name of the WebSocket connection under the Name column of the Requests table.

The table contains three columns:

• Data. The message payload. If the message is plain text, it's displayed here. For binary opcodes, this column displays the opcode's name and code. The following opcodes are supported: Continuation Frame, Binary Frame, Connection Close Frame, Ping Frame, and Pong Frame.
• Length. The length of the message payload, in bytes.
• Time. The time when the message was received or sent.

Messages are color-coded according to their type:

• Outgoing text messages are light-green.
• Incoming text messages are white.
• WebSocket opcodes are light-yellow.
• Errors are light-red.

# View a preview of a response body

To view a preview of a response body:

1. Click the URL of the request, under the Name column of the Requests table.
2. Click the Preview tab.

This tab is mostly useful for viewing images.

# View a response body

To view the response body to a request:

1. Click the URL of the request, under the Name column of the Requests table.
2. Click the Response tab.

# View HTTP headers

To view HTTP header data about a request:

1. Click on the URL of the request, under the Name column of the Requests table.
2. Click the Headers tab.

# View HTTP header source

By default, the Headers tab shows header names alphabetically. To view the HTTP header names in the order they were received:

1. Open the Headers tab for the request you're interested in. See View HTTP headers.
2. Click view source, next to the Request Header or Response Header section.

# Provisional headers warning

Sometimes the Headers tab shows the Provisional headers are shown... warning message. This may be due to the following reasons:

• The request wasn't sent over the network but was served from a local cache, which doesn't store the original request headers. In this case, you can disable caching to see the full request headers.

• The network resource isn't valid. For example, execute fetch("https://jec.fyi.com/unknown-url/") in the Console.

DevTools can also display only provisional headers due to security reasons.

# View request payload

To view the request's payload, that is, its query string parameters and form data, select a request from the Requests table and open the Payload tab.

# View payload source

By default, DevTools shows the payload in a human-readable form.

To view the sources of query string parameters and form data, on the Payload tab, click view source next to the Query String Parameters or Form Data sections.

# View URL-decoded arguments of query string parameters

To toggle URL-encoding for arguments, on the Payload tab, click view decoded or view URL-encoded.

# View cookies

To view the cookies sent in a request's HTTP header:

1. Click the URL of the request, under the Name column of the Requests table.
2. Click the Cookies tab.

For a description of each of the columns, see Fields.

To modify cookies, see View, edit, and delete cookies.

# View the timing breakdown of a request

To view the timing breakdown of a request:

1. Click the URL of the request, under the Name column of the Requests table.
2. Click the Timing tab.

See Preview a timing breakdown for a faster way to access this data.

See Timing breakdown phases explained for more information about each of the phases that you may see in the Timing tab.

# Preview a timing breakdown

To view a preview of the timing breakdown of a request, hover over the request's entry in the Waterfall column of the Requests table.

See View the timing breakdown of a request for a way to access this data that does not require hovering.

# Timing breakdown phases explained

Here's more information about each of the phases you may see in the Timing tab:

• Queueing. The browser queues requests when:
  • There are higher priority requests.
  • There are already six TCP connections open for this origin, which is the limit. Applies to HTTP/1.0 and HTTP/1.1 only.
  • The browser is briefly allocating space in the disk cache
• Stalled. The request could be stalled for any of the reasons described in Queueing.
• DNS Lookup. The browser is resolving the request's IP address.
• Initial connection. The browser is establishing a connection, including TCP handshakes/retries and negotiating an SSL.
• Proxy negotiation. The browser is negotiating the request with a proxy server.
• Request sent. The request is being sent.
• ServiceWorker Preparation. The browser is starting up the service worker.
• Request to ServiceWorker. The request is being sent to the service worker.
• Waiting (TTFB). The browser is waiting for the first byte of a response. TTFB stands for Time To First Byte. This timing includes 1 round trip of latency and the time the server took to prepare the response.
• Content Download. The browser is receiving the response, either directly from the network or from a service worker. This value is the total amount of time spent reading the response body. Larger than expected values could indicate a slow network, or that the browser is busy performing other work which delays the response from being read.
• Receiving Push. The browser is receiving data for this response via HTTP/2 Server Push.
• Reading Push. The browser is reading the local data previously received.

# View initiators and dependencies

To view the initiators and dependencies of a request, hold Shift and hover over the request in the Requests table. DevTools colors initiators green, and dependencies red.

When the Requests table is ordered chronologically, the first green request above the request that you're hovering over is the initiator of the dependency. If there's another green request above that, that higher request is the initiator of the initiator. And so on.

# View load events

DevTools displays the timing of the DOMContentLoaded and load events in multiple places on the Network panel. The DOMContentLoaded event is colored blue, and the load event is red.

# View the total number of requests

The total number of requests is listed in the Summary pane, at the bottom of the Network panel.

# View the total size of transferred and loaded resources

DevTools lists the total size of transferred and loaded (uncompressed) resources in the Summary pane, at the bottom of the Network panel.

See View the uncompressed size of a resource to see how large resources are after the browser uncompresses them.

# View the stack trace that caused a request

When a JavaScript statement causes a resource to be requested, hover over the Initiator column to view the stack trace leading up to the request.

# View the uncompressed size of a resource

Check Settings > Use large request rows and then look at the bottom value of the Size column.

In this example, the compressed size of the www.google.com document that was sent over the network was 43.8 KB, whereas the uncompressed size was 136 KB.

# Export requests data

# Save all network requests to a HAR file

HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. The format is a JSON object with a particular set of fields.

You can save all network requests to a HAR file in two ways:

• Right-click any request in the Requests table and select Save all as HAR with content.
• Click Export HAR in the action bar at the top of the Network panel.

Once you have a HAR file, you can import it back into DevTools for analysis in two ways:

• Drag-and-drop the HAR file into the Requests table.
• Click Import HAR in the action bar at the top of the Network panel.

# Copy one or more requests to the clipboard

Under the Name column of the Requests table, right-click a request, hover over Copy, and select one of the following options:

• Copy link address. Copy the request's URL to the clipboard.
• Copy response. Copy the response body to the clipboard.
• Copy as PowerShell. Copy the request as a PowerShell command.
• Copy as fetch. Copy the request as a fetch call.
• Copy as Node.js fetch. Copy the request as a Node.js fetch call.
• Copy as cURL. Copy the request as a cURL command.
• Copy all as PowerShell. Copy all requests as a chain of PowerShell commands.
• Copy all as fetch. Copy all requests as a chain of fetch calls.
• Copy all as Node.js fetch. Copy all requests as a chain of Node.js fetch calls.
• Copy all as cURL. Copy all requests as a chain of cURL commands.
• Copy all as HAR. Copy all requests as HAR data.

# Change the layout of the Network panel

Expand or collapse sections of the Network panel UI to focus on what's important to you.

# Hide the Filters pane

By default, DevTools shows the Filters pane. Click Filter to hide it.

# Use large request rows

Use large rows when you want more whitespace in your network requests table. Some columns also provide a little more information when using large rows. For example, the bottom value of the Size column is the uncompressed size of a request.

Open Settings and click Use large request rows to enable large rows.

# Hide the Overview pane

By default, DevTools shows the Overview pane. Open Settings and uncheck the Show overview checkbox to hide it.