Measure the network performance of your site using the Network panel.
The Network panel records information about each network operation on a page, including detailed timing data, HTTP request and response headers, cookies, and more.
- Network panel overview
- Record network activity
- Capture screenshots during recording
- View DOMContentLoaded and load event information
- View details for a single resource
- View resource initiators and dependencies
- Sort requests
- Filter requests
- Copy, save, and clear network information
- Customize the Network panel
- Additional resources
- Use the Network panel to record and analyze network activity.
- View load information in aggregate or for individual resources.
- Filter and sort how resources are dispalyed.
- Save, copy, and clear network recordings.
- Customize the Network panel to your needs.
Network panel overview
The Network panel consists of five panes:
- Controls. Use these options to control how the Network panel looks and functions.
- Filters. Use these options to control which resources are displayed in the Requests Table. Tip: hold cmd and then click on a filter to select multiple filters at the same time.
- Overview. This graph shows a timeline of when resources were retrieved. If you see multiple bars stacked vertically, it means that those resources were retrieved simultaneously.
- Requests Table. This table lists out every resource that was retrieved. By default, this table is sorted chronologically, with the earliest resources at the top. Clicking on the name of a resource yields more information about it. Tip: right-click on any of the table headers except Timeline to add or remove columns of information.
- Summary. At a glance this pane tells you the total number of requests, amount of data transferred, and load times.
The Requests Table displays the following columns by default. You can add and remove columns.
- Name. The name of the resource.
- Status. The HTTP status code.
- Type. The MIME type of the requested resource.
- Initiator. The object or process that initiated the request. It can have one of the following values:
- Parser. Chrome’s HTML parser initiated the request.
- Redirect. A HTTP redirect initiated the request.
- Script. A script initiated the request.
- Other. Some other process or action initiated the request, such as the user navigating to a page via a link, or by entering a URL in the address bar.
- Size. The combined size of the response headers (usually a few hundred bytes) 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.
- Timeline. The Timeline column displays a visual waterfall of all network requests. Clicking the header of this column reveals a menu of additional sorting fields.
Record network activity
When the Network panel is open, DevTools records all network activity by default. To record, just reload a page while the panel is open, or wait for network activity on the currently loaded page.
You can tell whether or not DevTools is recording via the record button. When it’s red (), DevTools is recording. When it’s grey (), DevTools is not recording. Click this button to start or stop recording, or press the keyboard shortcut cmd+e.
Capture screenshots during recording
The Network panel can capture screenshots during a page load. This feature is known as the Filmstrip.
Click on the camera icon to enable the Filmstrip. When the icon is grey, the Filmstrip is disabled (). When the icon is blue, it is enabled ().
Reload the page to capture the screenshots. The screenshots are displayed above the Overview.
When you hover over a screenshot, the Timeline displays a vertical yellow line indicating when the frame was captured.
Double-click on a screenshot to view a zoomed version of the screenshot. While a screenshot is zoomed, use the left and right arrows of your keyboard to navigate between screenshots.
View DOMContentLoaded and load event information
DOMContentLoaded is fired when the initial markup of a page has been parsed. It is displayed in two places on the Network panel:
- The blue vertical bar in the Overview pane signifies the event.
- In the Summary pane you can see the exact time of the event.
load is fired when a page has fully loaded. It is displayed in three places:
- The red vertical bar in the Overview pane signifies the event.
- The red vertical bar in the Requests Table signifies the event, too.
- In the Summary pane you can see the exact time of the event.
View details for a single resource
Click on a resource name (under the Name column of the Requests Table) to view more information about that resource.
The tabs available change depending on what type of resource you’ve selected, but the four tabs below are most common:
- Headers. HTTP headers associated to the resource.
- Preview. Previews of JSON, image, and text resources.
- Response. HTTP response data (if any).
- Timing. A granular breakdown of the request lifecycle for the resource.
View network timing
Click the Timing tab to view a granular breakdown of the request lifecycle for a single resource.
The lifecycle shows how much time is spent in the following categories:
- Request sent
- Waiting (Time to first byte (TTFB))
- Content Download
You can also view this same information by hovering your mouse over a resource within the Timeline graph.
View HTTP headers
Clicking the Headers shows the headers for that resource.
The Headers tab displays the resource’s request URL, HTTP method, and response status code. Additionally, it lists the HTTP response and request headers and their values, and any query string parameters.
You can view response headers, request headers, or query string parameters in source or parsed format by clicking the
view source or
view parsed link next to each section.
You can also view query string parameters in URL encoded or decoded format by clicking the
view URL encoded or
view decoded link next to that section.
Preview a resource
Click the Preview tab to view a preview of that resource. The Preview tab may or may not display any useful information, depending on the type of resource you’ve selected.
View HTTP response content
Click the Response tab to view the resource’s unformatted HTTP response content. The Response tab may or may not contain any useful information, depending on the type of resource you’ve selected.
Click the Cookies tab to view a table of cookies transmitted in the resource’s HTTP request and response headers. This tab is only available when cookies are transmitted.
Below is a description of each of the columns in the table:
- Name. The cookie’s name.
- Value. The cookie’s value.
- Domain. The domain the cookie belongs to.
- Path. The URL path the cookie came from.
- Expires / Max-Age. The value of the cookie’s expires or max-age properties.
- Size. The size of the cookie in bytes.
- Secure. The presence of this attribute indicates that the cookie should only be transmitted over a secure connection.
View WebSocket frames
Click the Frames tab to view
WebSocket connection information. This tab is only visible when the selected resource initiated a
The table below describes each of the columns in the table on the Frames tab:
- Data. The message payload. If the message is plain text, it’s displayed here. For binary opcodes, this field displays the opcode’s name and code. The following opcodes are supported:
- Continuation Frame
- Binary Frame
- Connection Close Frame
- Ping Frame
- Pong Frame
- Length. The length of the message payload in bytes.
- Time. The time stamp when the message was created.
Messages are color-coded according to their type:
- Outgoing text messages are color-coded light-green.
- Incoming text messages are white.
- WebSocket opcodes are light-yellow.
- Errors are light-red.
Notes about current implementation:
- To refresh the Frames table after new messages arrive, click the resource name on the left.
- Only the last 100
WebSocketmessages are preserved by the Frames table.
View resource initiators and dependencies
Hold Shift and hover over a resource to view its initiators and dependencies. This section refers to the resource that you are hovering over as the target.
The first resource above the target that is color-coded green is the initiator of the target. If there is a second resource above that which is color-coded green, that’s the initiator of the initiator. Any resources below the target that are color-coded red are dependencies of the target.
In the screenshot below, the target is
dn/. The initiator of the target is the script beginning with
rs=AA2Y. The initiator of the initiator (
dn.js is a dependency of the target (
Keep in mind that for pages with lots of resources it’s possible that you may not be able to see all of the initiators or dependencies.
By default, the resources in the Requests Table are sorted by the start time of each request, starting with the earliest requests at the top.
Click on the header of a column to sort the table by each resource’s value for that header. Click the same header again to change the sort order to ascending or descending.
The Timeline column is unique from the others. When clicked, it displays a menu of sort fields:
- Timeline. Sorts by the start time of each network request. This is the default sort, and is the same as sorting by the Start Time option.
- Start Time. Sorts by the start time of each network request (same as sorting by the Timeline option).
- Response Time. Sorts by each request’s response time.
- End Time. Sorts by the time when each request completed.
- Duration. Sorts by the total time of each request. Select this filter to determine which resource takes the longest time to load.
- Latency. Sorts by the time between the start of the request and the beginning of the response. Select this filter to determine which resource takes the longest time to first byte (TTFB).
The Network panel provides numerous ways to filter which resources are displayed. Click the filters button () to hide or display the Filters pane.
Use the content type buttons to only display resources of the selected content type.
- Hold Cmd (Mac) or Ctrl (Windows/Linux) and then click to enable multiple filters simultaneously.
The filter text field is deceptively powerful. If you enter an arbitrary string in it, the Network panel only displays the resources whose filenames match the given string.
The filter text field also supports various keywords that let you sort resources by various properties, such as file size using the
The list below describes all of the keywords.
domain. Only display resources from the specified domain. You can use a wildcard character (
*) to include multiple domains. For example,
*.comdisplays 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.
larger-than. Show resources that are larger than the specified size, in bytes. Setting a value of
1000is equivalent to setting a value of
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 (
scheme. Show resources retrieved over unprotected HTTP (
scheme:http) or protected HTTPS (
set-cookie-domain. Show the resources that have a
Set-Cookieheader with a
Domainattribute 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-Cookieheader 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-Cookieheader 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.
Some of the keywords above mention an autocomplete dropdown menu. To trigger the autocomplete menu, type in the keyword followed by a colon. For example, in the screenshot below typing
domain: triggered the autocomplete dropdown.
Copy, save, and clear network information
Right-click within the Requests Table to copy, save, or delete network information. Some of the options are context-senstive, so if you want to operate on a single resource, you need to right-click on that resource’s row. The list below describes each of the options.
- Copy Response. Copies the HTTP response of the selected resource to the system clipboard.
- Copy as cURL. Copies the network request of the selected resource as a cURL command string to the system clipboard. See Copying requests as cURL commands.
- Copy All as HAR. Copies all resources to the system clipboard as HAR data. A HAR file contains a JSON data structure that describes the network “waterfall”. Several third-party tools can reconstruct the network waterfall from the data in the HAR file. See Web Performance Power Tool: HTTP Archive (HAR) for more information.
- Save as HAR with Content. Saves all network data to an HAR file along with each page resource. Binary resources, including images, are encoded as Base64-encoded text.
Clear Browser Cache. Clear the browser cache.
Tip: You can also enable or disable the browser cache from the Network Conditions drawer.
- Clear Browser Cookies. Clear the browser’s cookies.
- Open in Sources Panel. Open the selected resource in the Sources panel.
- Open Link in New Tab. Opens the selected resource in a new tab. You can also double-click the resource name in the Network table.
- Copy Link Address. Copies the resource URL to the system clipboard.
- Save. Save the selected text resource. Only displayed on text resources.
- Replay XHR. Re-send the selected
XMLHTTPRequest. Only displayed on XHR resources.
Copy requests as cURL commands
cURL is a command line tool for making HTTP transactions. When you right-click on a resource in the Requests Table and then select Copy as cURL, DevTools recreates an HTTP request (including HTTP headers, SSL certificates, and query string parameters) and copies it as a cURL command string to the clipboard. You can then paste the string into a terminal window (on a system with cURL) to execute the same request.
Below is an example cURL command line string taken from a XHR request on the Google News home page.
curl 'http://news.google.com/news/xhrd=us' -H 'Accept-Encoding: gzip,deflate,:sdch' -H 'Host: news.google.com' -H 'Accept-Language: en-US,en;q=0.8' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1510.0 Safari/537.36' -H 'Accept: */*' -H 'Referer: http://news.google.com/nwshp?hl=en&tab=wn' -H 'Cookie: NID=67=eruHSUtoIQA-HldQn7U7G5meGuvZOcY32ixQktdgU1qSz7StUDIjC_Knit2xEcWRa-e8CuvmADminmn6h2_IRpk9rWgWMdRj4np3-DM_ssgfeshItriiKsiEXJVfra4n; PREF=ID=a38f960566524d92:U=af866b8c07132db6:FF=0:TM=1369068317:LM=1369068321:S=vVkfXySFmOcAom1K' -H 'Connection: keep-alive' --compressed
Customize the Network panel
By default the Requests Table displays resources with small rows. Click the Use large resource rows button () to increase the size of each row.
Large rows enable some columns to display two text fields: a primary field and a secondary field. The column header indicates the meaning of the secondary field.
Add and remove table columns
Right-click on any of the headers in the Requests Table to add or remove columns.
Preserve the network log upon navigation
By default, the network activity recording is discarded whenever you reload the current page or load a different page. Enable the Preserve log checkbox to save the network log across these scenarios. New records are appended to the bottom of the Requests Table.
To learn more optimizing the network performance of your application, see the following resources:
- Use PageSpeed Insights to identify performance best practices that can be applied to your site, and PageSpeed optimization tools to automate the process of applying those best practices.
- High Performance Networking in Google Chrome discusses Chrome network internals and how you can take advantage of them to make your site faster.
- How gzip compression works provides a high-level overview gzip compression and why it’s a good idea.
- Web Performance Best Practices provides additional tips for optimizing the network performance of your web page or application.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Terms of Service.