The network of Chrome development tools

Often hear, for example, "Why is my JS code not executing?" "I clearly sent the request, why the reaction?" "How can I load this site so slowly?" "This kind of problem, then since the problem exists, it needs to solve it, need to solve it, first of all we have to find the cause of the problem, in order to" the right remedy. "

Each file is loaded, each send request is also a network interaction, so in this panel, we can see that we need the JS file is loaded? Did the interface we requested return to the end? Can we know which file is slowing down the entire Web page loading process? The Netwrok panel records every network interaction information of the application, the detail time of each interaction, the HTTP request header and the response header, the cookies, the WebSocket data, and so on ...

The panel's resource data relies on JavaScript's resource timing APIs, which provide detailed synchronization data for each resource's load. For example, explicitly list the time when an HTTP start request and the last byte are received and the detailed process. We can also get the resource load list through the Window.performance.getEntries () method, which gives the properties of the first object in the list.

Simply pass through the meanings of these attributes (these properties are read-only)

Connectend: Browser and server finish establishing the timestamp of the network connection used to retrieve the resource

Connectstart: Browser and server start to establish the timestamp of the network connection used to retrieve the resource

Damainlookupend: Timestamp when the browser completes the domain name resolution of the resource

Damainlookupstart: Timestamp When the browser starts the domain name resolution of the resource

Duration: Time lag from start to end for resource requests

The type of the Entrytype:performanceentry object that encapsulates a single performance indicator as part of the performance table, the type value

is one of "frame", "mark", "Measure", "Navigation", "resource", and "server".

Fetchstart: The time stamp for the browser to start getting resources

Initiatortype: Type of resource file

Name: The URL of the resource

Redirectend: Timestamp of the last response byte received to the redirected resource

Redirectstart: Start redirection to get the start timestamp of the resource

Requeststart: The browser requests a resource's start timestamp from the server

Responseend: The browser receives the timestamp of the last byte of the resource, or closes the time stamp of the transport connection

Responsestart: The browser receives the timestamp of the first byte of the server's response

Secureconnectionstart: The browser starts the handshake protocol to protect the security of the current connection, the start time of the handshake

StartTime: Time stamp before the browser starts to get the resource (the start time of the entire process)

Workerstart: If the current context is "worker", returns the timestamp at which the resource was started, otherwise 0 (should be applied to duplex communication)

Back to the network, let's take a look at this panel

Meet the Network

Record button

An information record of the network connection is made in this panel when it is turned on, and is not logged when it is turned off.

Clear Records

Clears the current network connection record information.

Capturing screenshots

Records page rendering at some point in time during page loading, as shown in the Visual window.

Filter conditions

Custom

In the Select box, you can enter a filter keyword to filter the resource list, as shown in.

You can also search for a specified condition, such as.

What are the specified conditions?

Domain: The field in which the resource resides, that is, the domain name part of the URL. such as domain:api.github.com

Has-response-header: Whether the resource has a response header, regardless of its value. such as Has-response-header:access-control-allow-origin

is: The request that is executing at the current point in time. Current available values: Running

Larger-than: Displays a resource larger than the specified value size specification. Units are bytes (B), but K (KB) and M (MB) are also possible ~ as larger-than:150k

Method: What HTTP request method to use. such as GET

Mime-type: Also writing Content-type, is the identifier for the resource type. such as text/html

Scheme: the agreement provides. such as HTTPS

Set-cookie-name: The cookie name set by the server

Set-cookie-value: The value of cookies set by the server

Set-cookie-domain: The domain of cookies set by the server

Status-code:http status code for the response header

Button Group

Filter according to the conditions set by the button, such as filtering out images.

Looks too high-end, unexpectedly can also browse the picture.

Button groups are: All,xhr,js,css,img,media,font,doc (Document), WS (WebSocket), Manifest,other.

Resource List Style

The display of resource list details and thumbnail information.

Save Log

Keep the log (including the resource list and data on the timeline) when the page is reloaded or the URL changes.

Whether to cache

When the developer tool is opened, the switch is turned on, the page resource is not cached and the status of the file request can be viewed from the state code of the status bar.

Current limit control (speed simulation)

Simulate the environment under different speeds load the current page, directly look at the picture can know how to use.

Time axis

There are two lines in the picture, one blue, one orange.

The Blue line represents that the DOM has been loaded, the red line indicates that the page has finished loading (including resource references), and you can listen to the two events in code, and do the corresponding actions at the point in time at which the two events are completed.

    Window.addeventlistener (' domcontentloaded ',function(e) {      true;      Console.log (Window.performance.now ());    },true);    Window.addeventlistener (' load ',function(e) {      true;      Console.log (Window.performance.now ());    },true);

Go back to the timeline to explore what information it provides us.

In conjunction with the timeline use of the resource list, we select the resource load situation for a period of time to look at.

The approximate time captured in the figure is a small section of 5.2~5.75, not a multi-color line represents a resource network interaction situation, the above timeline has 2 resources is just beginning to network connection, there are 3 resources have been loaded, there are 1 resources throughout the loading process The Timeline field in the corresponding resource list can be found to be the same as above, and it is also clear to see which file and its details are in this case.

Then you can see the details of the resource request by placing the mouse over the multicolor line in the timeline.

You can clearly see a resource's queue, stall, proxy protocol, initial connection, SSL protocol, send request, wait, and the time it takes to download the content.

Now that you've said so much, just pull the timeline out of the resource list and say it in advance, click the title of the timeline column, there are options, here are the options.

Start time: Sort by the sending times for each network request, and also the default sort

Respone time: Sort responses based on each network request

End time: Sort by the completion of each network request

Total Duration: Based on the overall time-consuming ordering of each network request

Latency: Sorts the time difference between sending requests per network request and getting response time points

Resource List

The resource list shows all the resource requests, and there are a lot of fields, which are listed below, but not in detail for each (in the case of detailed patterns, which are also included in the thumbnail mode).

Name (Path): Name and URL of the resource

Status (text): HTTP request State Code and text description

Type: The MIME type of the requested resource

Method:http Request Send method

Domain: The resource is in the same field

Cookies: The number of cookies generated by Web requests

Size (content): Sizes are dimensions that are added to the response header and response body, and content is the size specification for the contents of the resource decoding

Time (Latency): Time is the total number of times spent on network interaction, from sending a request to receiving the last byte, Latency is when the first byte is loaded in response
Timeline: Timeline (introduced, skipped ...)

There are also Cache-control (cache operations, which are controlled by Cache-control in the HTTP message header), Connection (connection state, such as keep-alive), Connection ID (connection ID), Content-encoding (connection decoding, such as Gzip), content-length (content length), ETag (entity tag, physical tag of the Resource), initiator (trigger point), keep-alive ( It is said that the function is to make the client-to-server connection continue to be valid), last-modified (last modified), priority (precedence), Protocol (protocol), remote address, Scheme (protocol mode), Set-cookies (set Cookies on the server), Vary (Code protocol for browsers and servers)

Each of the above knowledge points can be self-search, online data many oh (refers to Google ...)

Details about the resource

The Headers:header Panel lists resource request URLs, HTTP methods, response status codes, request headers and response headers, their respective values, request parameters, and so on.

Preview: Previews panel for resource previews.

Response: The response Information Panel contains content that has not yet been formatted by the resource, such as common JSON data, and, of course, the following does not conform to the previously mentioned JSON data, but JSONP ...

The cookies:cookies panel displays all cookies transmitted in this resource request and is displayed in a tabular format.

Timing: Details of the resource request, as described above.

There is also the WebSocket panel, in the need to implement duplex communication when there will be, temporarily not involved, not very understanding, after the understanding to do complete.

Information which comes

Mainly shows some basic statistics, the total number of requests, the total size of the transfer, the total time spent, the DOM loaded, the time the page was loaded (including resources),

In this case, if there is a difference, please point out ~ at the same time welcome the Exchange ~

The network of Chrome development tools