Network Analysis Reference

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

Note: This reference is based on Chrome 58. If you use another version
of Chrome, the UI and features of DevTools may be different. Check
chrome://help to see what version of Chrome you're running.

Record network requests

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

Figure 1. The Network panel

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.

Figure 2. Clear, outlined in blue

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.

Figure 3. The Preserve Log checkbox, outlined in blue

Capture screenshots during page load

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

To enable screenshots, click Capture screenshots on the Network panel. It turns
blue when enabled.

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.

Figure 4. Hovering over a screenshot. The yellow, vertical line
in the Overview pane and the Waterfall represent the time at which the
screenshot was captured.

Replay XHR request

To replay an XHR request, right-click the request in the Requests table
and select Replay XHR.

Figure 5. Selecting 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.

Figure 6. The Disable Cache checkbox, outlined in blue

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.

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.

Figure 7. Selecting 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.

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.

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
populates the autocomplete dropdown 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 dropdown 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 dropdown with all of the HTTP methods it
has encountered.

mime-type. Show resources of a specified MIME type. DevTools populates the
dropdown 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).

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 dropdown menu with all
of the status codes it has encountered.

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

Figure 12. Using the Type filters to display JS, CSS, and Doc[ument]
resources.

Filter requests by time

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

Figure 13. Filtering out any requests that weren't active around
2500ms

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.

Figure 14. The Hide Data URLs checkbox

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 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.

Figure 15. Sorting the Waterfall 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.

Figure 16. The Requests table, outlined in blue

The Requests table displays the following columns by default:

Name. The filename of, or an identifier for, the resource.

Status. The HTTP status code.

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.

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 checkmarks next to them.

Figure 17. Adding a column to the Requests table.

Add custom columns

To add a custom column to the Requests table, right-click the header of the
Requests table and select Response Headers > Manage Header Columns.

Figure 18. Adding a custom column to the Requests table.

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.

Analyze the frames of a WebSocket Connection

Click the URL of the WebSocket connection, under the Name column
of the Requests table.

Click the Frames tab. The table shows the last 100 frames.

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

Figure 20. The Frames tab, outlined in blue

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:

Click the URL of the request, under the Name column of the Requests
table.

Click the Preview tab.

This tab is mostly useful for viewing images.

Figure 21. The Preview tab, outlined in blue

View a response body

To view the response body to a request:

Click the URL of the request, under the Name column of the Requests
table.

Click the Headers tab.

Figure 22. The Response tab, outlined in blue

View HTTP headers

To view HTTP header data about a request:

Click on the URL of the request, under the Name column of the Requests
table.

Click the Headers tab.

Figure 23. The Headers tab, outlined in blue

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:

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.

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.

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.

Figure 28. Viewing the initiators and dependencies of a request

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.

Figure 29. The locations of the DOMContentLoaded and
load events in the Network panel

View the total number of requests

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

Caution: This number only tracks requests that have been logged since DevTools
was opened. If other requests occurred before DevTools was opened, those
requests aren't counted.Figure 30. The total number of requests since DevTools was opened

View the total download size

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

Caution: This number only tracks requests that have been logged since DevTools
was opened. If other requests occurred before DevTools was opened, those
requests aren't counted.Figure 31. The total download size of requests

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.

Figure 32. The stack trace leading up to a resource request

Export requests data

Save a request as HAR with content

To save a request in the HAR format with content:

Right-click the row containing the request in the Requests table.

Select Save as HAR with Content.

Figure 33. Selecting Save As HAR With Content

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 cURL. Copy the request as a cURL command.

Copy All as cURL. Copy all requests as a chain of cURL commands.

Copy All as HAR. Copy all requests as HAR data.

Figure 34. Selecting Copy Response

Change the layout of the Network panel

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