Chrome Development Tool evaluates network performance

Evaluate network performance

Information about the network operations of each of your applications, including detailed timing data, HTTP request and response heads, cookies, WebSocket data, and more recorded by the network team. The network panel can help you answer network performance questions for your Web application, such as:

• Where is the resource the slowest time first byte?
• Which resources take the longest to load (duration)?
• Who initiated a specific network request?
• How much time is spent on specific resources at various network stages?

About the Resource Timed API

The network panel uses the Resource Timing API, a JavaScript API that provides detailed network timing data for each loaded resource. F or example, the API can tell you the exact image http request starts when the last byte of the image is received. The following illustration shows the data points that the Resource Timed API provides for network scheduling.

The API can be used for any Web page, not just DevTools. I n Chrome, it exposes the global window.performance object approach. The performance.getEntries（） method returns the Resource Timed Object, an array of resources for each request on a page.

Try this: Open the current page of the JavaScript console, enter the following prompts, and enter:

window.performance.getEntries()[0]

Try this: Open the current page of the JavaScript console, enter the following prompts, and enter:

Each timestamp is a microsecond, or ResolutionTime specification. This API can inChrome as window.performance.now（） method.

Overview of the network panel

The network panel automatically records all network activity, and DevTools is open. T he panel may be empty the first time you open it. Refresh the page to start recording, or simply wait for network activity to occur in your application.

Each requested resource is added as a row to the network table, which contains the columns listed below. Please note the following about the network table:

• All columns that are not listed below are visible by default; You can easily display or hide columns.
• Some columns contain primary and secondary fields (ex: time and wait times). W hen viewing the large resource rows of the network table, both areas are displayed; Only the primary domain is displayed when using small resource rows.
• You can sort the table by clicking the column title by the value of the column. C olumns in the timeline behave differently: Click the menu of the other sort fields displayed in its column title. See Waterfall View, Sort and Filter for more information.

The name and path	The name of the resource and the URL path are respectively
Method	The HTTP method used for the request. For example: GET or POST
Status and text	HTTP status codes and text messages.
Domain name	The domain name of the resource request.
Type	The resource requested by the MIME type.
The starter	the object or procedure that initiated the request. It can have one of the following values:

Analyzer	Chrome's HTML parser makes a request
Redirect	An HTTP redirect initiates the request.
Script	The script initiates the request.
Other	Requests initiated by other processes or actions, such as a user navigating a Web page through a link, or entering a URL in the address bar.

Cookies	The number of cookies transmitted in the request. These correspond to cookies that appear when the cookie label views details for a given resource.
Set-Cookies	The number of cookies set in the HTTP request.
Size and content	Size is the combined size of the response header (usually a few hundred bytes) plus the response body as the delivery server. T he content is the size of the decoded content of the resource. If the resource is from the browser's cache instead of loading on the network, this field contains text (from the cache).
Time and wait time	The time is the total duration, starting with the request to the last byte in the received response. The delay is the time of the response in the first byte of the load
Schedule	The timeline bar shows the visual waterfall for all network requests. Clicking on the title of the column reveals the menu for additional sort fields.

The navigation blog is saved

By default, when the current network log is logged, it navigates to another page, or refreshes the current page to drop. T o keep logging in these cases, click Black keep logs in the navigation keys do not save logs at the bottom of the network panel; T he new record is appended to the bottom of the table. Click the button again (red remains in the navigation resource) to disable log saving.

Sorting and filtering

By default, resources in the network table are sorted by the start time of each request (waterfall on the network). Y ou can sort the table by clicking the column title by another column value. Click the title again to change the sort order (ascending or descending).

Timeline columns are unique to others, and when clicked, a menu of additional sort fields is displayed.

The menu contains the following sorting options:

• Timeline - Sorted by the start time of each network request. This is the default sort, and is the same as the start time option sort).
• Start Time - Sorted by the start time of each network request (as in the same way by the Timeline option).
• Response time - By sorting the response time for each request.
• End time - The time that each request is completed by sorting.
• Duration - Sorted by the total time of each request.
• Delay - Sorts the time between the start of the request and the beginning of the response (also known as "time to first byte").

To filter the network table that shows only certain types of resources, click one of the content types along the bottom of the panel: documents, style sheets, pictures, scripts, XHR, fonts for WebSockets and others. T he screenshot below is displayed only by CSS resources. To see all content types, click the All Filter button.

Advanced filtering

In addition to resource type filtering, you can filter queries to shrink resources. Enter field 200 in the filter: For example, to find all the resources with 200 status codes, you can enter the query's StatusCode.

Note the following behavior: The filter query contains a type (StatusCode) and value (200). F ilter queries are case insenso sensitive, so you can type capital or small. T his filter type gives you auto-completion recommendations. U se the arrow keys to form a selection, and then Tab to select it. T he filter value has auto-completion which indicates that you value the existing network records. Q uickly preview the results of your query and Up the recommendations by using the Down arrow keys. T he results appear immediately, even if you don't press the Enter key or tab to complete the selection. A query that negates a filter, preceded by a dash query (-), for example - StatusCode:200.

Types of filters available:

Domain	The domain portion from the URL of the resource. For example www.google-analytics.com.
Has a response header	Check that the resource has a response header, regardless of the value. For example, access - control - allows origin.
Is	Displays requests running at the current point in time. Current available value: Run
The decline was higher	Indicates a request with a larger transfer size than the specified amount. Suppose the units are in bytes, but the units of kbytes (K) and megabits (M) are also allowed: for example: a larger ratio of 50, a decrease of more than 150K, a decrease of more than 20M
Method	Http method is used. For example, GET.
The type of MIME	Also known as the content type - the type of resource of the identifier. For example text / html.
Scheme	In the URL scenario section. For example, HTTPS.
Set the name of the cookie	The name server settings for the cookie. For example, logedIn (assuming a similar logedIn is a cookie for TRUE).
Set the value of the cookie	The value of the cookie set by the server. For example, real (assuming you like logedIn - TRUE a cookie).
Set the cookie domain	The domain name server for the cookie is set to . F or foo.com (assuming a similar logedIn is true; D omains - foo.com; P ath s /; E xpires: Wednesday, January 13, 2021 at 22:23:01 GMT; Http only).
The status code	The status code in the HTTP response. For example, 200

Using the query shown in the list above, build it in the format of: .lt; filter type. You almost always use auto-completion recommendations to make sure your query is valid.

Add and remove columns from the table

You can change the default settings for the columns displayed by the network table. To display or hide columns, right-click or control-click (Mac only) at the header, and then select or deselet the column name from the list.

Change the size of the resource row

You can view the network table with larger resource rows (the default), or smaller resource rows. C lick the blue toggle button with a small resource line, and the small row of resources is at the bottom of the panel to view the small line. C lick the button (now a gray large resource line) to view the large resource row again. L arge rows enable columns to display two text fields: one and two (time and wait times, for example). When watching a small row only the main field is displayed.

Waterfall view

View graphic flowers loaded with each resource in the network panel waterfall. From HTTP requests the start time of the last byte that received the response.

Each resource load time is represented as a column. T his has information color-coded with each resource. E ach color specifies that receiving a resource requires different steps. Bar's larger representatives are requesting more data for trasmitted.

The timeline of the network is a simple web page.

Hovering over the bar itself renders the full timing data. This is the same information that is rendered in the Details of Time Series tab for a given resource.

Network timed information disclosure hovers over

You can make the settings on the network to view the timesheet as color-coded by the resource type. I f you do network scheduling information is still accessed through prompts. The waterfall rod is color-coded as follows:

	File
	Style sheet
	Image
	Script
	Xhr
	Font
	Other

Save and copy network information

右键单击 Ctrl+单击（仅限Mac） context menu that appears within several action network tables. Some of these actions apply to resource areas, such as copying HTTP request headsers, while others apply to records for the entire network, such as saving network records as a HAR file.

The following menu actions are applied to the selected resources:

• Open a link to a new tab - a resource in a new tab. You can also double-click on the resource name in the network table.
• Copy Link Address - Copy resource URL to system clipboard.
• Copy Request Header - Copy HTTP request header to system clipboard.
• Copy Response Head - Copy HTTP Response Head to System Clipboard.
• Copy as curl - Copy network requests as a cURL command string to the system clipboard. See Copy requests as curly commands.
• Replay XHR - If the request is an XMLHttpRequest, resend the original XHR.

Copy the request as a curly command

cURL is a command-line tool for HTTP transactions. T he network panel copies an HTTP request (including HTTP headers, SSL certificates, and query string parameters) for the curl command, and copies its copy of the curl command string to the clipboard. You can then paste a string of terminal windows (on a curly system) to perform the same request.

Below is an example cURL command line string from the XHR request on the Google News homepage.

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

Save network data

You can save data from a network record as a HAR (HTTP Archive) file, or copy the record as a HAR data structure to the clipboard. A HAR file contains a JSON data structure that describes the "waterfall" of the network. Some third-party tools can rebuild the network waterfall from the data in the HAR file.

To save a record:

1. Right-click or control-click the network table.
2. In the shortcut menu that appears, select one of the following:
   • All copies are HAR - copy network records in the HAR format of the system clipboard.
   • Save as HAR and Content - Save all network data to HAR files and each page resource. Binary resources, including images, encoded as Base64 encoded text.

For more information, Web Performance Power Tools: HTTP Archive (HAR).

Details of the network resource

When you click the resource name of the network table, a tabbed window appears with the following additional details:

• HTTP request and response header
• A preview of the resource
• HTTP response
• The name and value of the cookie
• WebSocket message
• The resource network is scheduled

HTTP header

The title label displays the URL, HTTP method, and response status code for the resource's request. I n addition, it lists http response and request heads and their values, as well as any query string parameters. Y ou can view HTTP header parsing and formatting, or click the View Resolution/View source code toggle button, which is adjacent to their source code form in the section of each title. You can also view the parameter values in the form of your own decoding or URL encoding, click to see each query string section next to the decode/view URL encoding toggle button.

You can also request and respond to a copy of the header to the clipboard.

A preview of the resource

The Preview tab displays the resource when a preview is available. Preview the current display image and JSON resources, as shown below.

You can view the Responseta b formatted response on the resource.

HTTP response

The Response tab contains unformatted content for the resource. Below is a screenshot of the JSON data structure that was returned as a response to the request.

You can also view previews of some resource types format, including JSON data structures and images.

Cookies

The cookies tab displays a table of all cookies sent at the source's HTTP request and response header. You can also clear all cookies.

The cookie table contains the following columns:

Name	The name of the cookie.
Value	The value of the cookie.
Domain	The cookies for this domain belong.
Path	Where does the cookie for the URL path come from?
Expires / Max-Age	The value of the cookie expires or the performance of max-age.
Size	The size of the cookie in bytes.
HTTP	This indicates that the cookie should only be set by the browser requested by HTTP and cannot be accessed with JavaScript.
Secure	The presence of this property indicates that the cookie should only be sent over a secure connection.

WebSocket's framework

Frame labels display messages sent or received over a WebSocket connection. T his tab is visible to selected resource-initiated WebSocket connections. The table contains the following columns:

Data	The message load. I f the message is plain text, it appears here. F or binary action codes, this field displays the name and code of the operation code. Support for the following operating codes:
Continuation rack
Binary framework
The connection closes the frame
Flat frame
side frame
Length	The length of the payload of the message in bytes
Time	The message created when the timestamp was created

Messages are color coded according to their type. O utgoing text information color-coded light green; The text messages received are all white:

WebSocket's code is light yellow:

The error is light red.

Notes on current implementations:

• When a new message arrives in the frame table to refresh, click the resource name on the left.
• Only the last 100 WebSocket messages are retained by the frame table.

The resource network is scheduled

Time spent on the Timing Chart tab during various network phases involving loading resources. This shows the same data when you hover at the Waterfall View Resource Bar.

Stalled/Blocking	Time requests are spent waiting for it to be sent. T his time it's inclusive proxy negotiations that take any time. In addition, this time will include TCP connections when the browser is waiting for an established connection to become re-utilizable and subject to Chrome's maximum per-origin rule.
Proxy Negotiation	The time spent negotiating the connection to the proxy server.
DNS Lookup	Time spent on DNS queries. Each new area on the page requires a complete round trip to do DNS lookups.
Initial Connection / Connecting	Time spent establishing connections, including TCP handshakes/retrys and negotiations on SSL.
Ssl	Time spent completing the SSL handshake.
Request Sent / Sending	Time spent making network requests. Usually a fraction of a millisecond.
Waiting (TTFB)	The time spent waiting for the initial response, also known as time to the first byte. At this point, the wait time for the round trip to the de-time server is spent waiting for the response provided by the server.
Content Download / Downloading	The time it took to receive response data.