A, Chrome Ethereal: Network panel
1, Network panel
• Controller: the appearance and functionality of the control panel
• Filter: Filter Resources display request list
• Hold down the Command (Mac) or Ctrl (Window / Linux), then click on the filter can select multiple filters
• Overview: display HTTP request, response axis
• request list: default time sequence, selectable display column
• Summary: total number of requests, the total amount of data, the total time spent
2, the controller
To load a saved across the page request Preserve log
Relatively poor user's network when the problem can be reproduced
Second, the filter
1, Filter: by type
XHR, JS, CSS, Img, Media, Font, Doc, WS (WebSocket), Manifest , or Other (any other types not listed here)
multi-type, hold down the Command (Mac) or Ctrl (Windows, Linux)
Filter by time: Overview panel, drag the scroll bar
Hidden Data URLs: CSS and other small images embedded in an HTML file to BASE64 format, to reduce the number of HTTP requests
Hide ago
After hiding
2, filter: Filter Properties (a)
domain: display only resources from the specified domain. You can use wildcard characters (*) to include multiple domains
domain:*.alicdn.com method:GET
has-response-header: displaying the specified resource contains HTTP response header
is: use is: running WebSocket can find resources, is: from-cache buffer can be read out to find resources
is:from-cache
Unchecked ago
After selecting
larger-than: display the resource is larger than the specified size (in bytes). Is equivalent to the value of 1000 is set to 1k
method: The method of HTTP display by specifying a resource type retrieval
mime-type: display the resource specified MIME type
implemented by an AND operation between multi-attribute space
3, the filter: Filter Properties (b)
• mixed-content: display all mixed content resources (mixed-content: all), or only resources (mixed-content: displayed) currently displayed.
• scheme: display through unprotected HTTP (scheme: http) or protected HTTPS (scheme: https) retrieve the resource.
• set-cookie-domain: display and have the resources and the value of the Domain attribute specifies the matching Set-Cookie header.
• set-cookie-name: the name of the show and have the resources that match the specified value Set-Cookie header.
• set-cookie-value: the display has a specified value and the value of the resources that match the Set-Cookie header.
• status-code: show HTTP status code resources that match the specified code only.
AND operation between multiple properties achieved through space
Third, the sorted list of requests
Time sort, default
• Sort by column
• Sort by Time
Start Time: a first request issued at the top
Response Time: a first request to start the download at the top
End Time: the first request is completed at the top
Total Duration: connection setup time and request / request response time is the shortest at the top
Latency: the shortest wait time in response to the request at the top
Request list (a)
• Name: name of the resource
• Status: HTTP status code
• Type: MIME type of the requested resource
Request list (II)
Initiator: initiating a request object or process. It may have the following values:
• Parser (parser): Chrome HTML parser initiated request
• mouseover display JS script
• Redirect (Redirect): HTTP redirection started request
• Script (script): Script start request
• other (other): some other process or action initiated the request, for example, a user click on a link to jump to a page or enter the URL in the address bar
Request list (c)
• Size: the size of the response returned by the server (including packet header and body) may be displayed after extracting Size
• Time: total duration, from the request to the last byte of received responses
• Waterfall: each request related activities visual analysis chart
Request List
Fourth, content preview request
Preview request content (a)
View head
• Check the cookie
• Preview the response body: View images with
• Check the response body
• detailed time distribution
• export data format is HAR
• View uncompressed size of resources: Use Large Request Rows
Content preview request (II)
• Browser loading time (overview, summary, request list)
• color DOMContentLoaded event is set to blue, and the load event to red
• request data copied to clipboard
- • Copy Link Address: copy the requested URL to the clipboard
- • Copy Response: The response enclaves copied to the clipboard
- • Copy as cURL: cURL command to copy request form
- • Copy All as cURL: Copy all requests to form a series of cURL command
- • Copy All as HAR: copy all the data in the form of a request to HAR
• View requests on Downstream: Hold down the shift key on the Hover request, green is the upstream, downstream red
Fifth, the browser load time
Trigger process:
• HTML parsing structure
• Loading external scripts and stylesheets file
• parse and execute script code // part of the script will block the page is loaded
• DOM tree construction is completed // DOMContentLoaded events
• Load pictures and other external files
• page load / / load events
1, the detailed distribution request time (a)
• Queueing: browser request is queued in the following cases
- • there is a higher priority requests
- • This source has six open TCP connections limit is reached, only for HTTP / 1.0 and HTTP / 1.1
- • browser is short allocate space in the disk cache
• Stalled: request for any reason may be due to Queueing described stop
• DNS Lookup: browser request is being resolved IP address
• Proxy Negotiation: the browser is requesting consultations with the proxy server
2, the detailed distribution request time (b)
• Request sent: Sending request
• ServiceWorker Preparation: browser is starting Worker Service
• Request to ServiceWorker:'re sending a request to the Worker Service
• Waiting (TTFB): the browser is waiting for the response of the first byte. TTFB represents the To First Byte Time
(time to first byte). This time includes a round-trip delay time and the server is ready to response time used
• Content Download: browser is receiving response
• Receiving Push: Data Browser is receiving this response via HTTP / 2 server push
• Reading Push: the browser is reading local data received prior to taking
