This is the 24th day of my participation in the First Challenge 2022

The Network panel

The Chrome DevTools Network panel is used to measure the Network performance of the current web page. It records information about each Network operation on the current web page, including time data, HTTP requests, returned data, and so on.

International practice, first see the full screenshot overview

Ⅰ – the Control panel

1) Start/stop recording

Indicates normal log network request status, click when the icon becomes“, it means to stop recording the request status, at this time the page will not record the subsequent request (retain the record before the click).

2) Clear record

Click on theYou can clear the contents of the request form.

3) Capture the moment of loading

There is no recording icon in my Control panel, but it is actually in the setting panel, see the setting icon section on the right below

  1. It is still speculated that the version is different. Here is the online description of its function:

Click on the, when the icon becomes“, indicates that the screen capture mode is enabled, which captures the moment when the web page is loading. These moments show which parts of the web page are loaded at what time.

  1. I operate

The following results appear (display my sample image) :

4) filter

Click on theYou can show/hide the filter panel as follows:

  1. You can think of the filter panel as a three-part panel, from left to right: Filter text fields, hide Data URLs, and request resource type selection.
  2. For those who don’t understand Data URLs, see: Data URLs. The main purpose of this post is to hide resources that are presented in Data URLs, which I won’t go into here
  3. There is a list of file types behind the “Hide data URLs”. Select a file that shows only that type of file request in the request form below, and you can press the button as you choosectrl / cmd, so you can choose more than one
1.Select the requested resource type

There is a list of file types behind “Hide data URLs”. Select a file that shows only that type of file in the request form below, or press CTRL/CMD to select multiple file types

2.Filtered text field

Let’s talk about the filter text field, which is the input box on the left of the filter panel

  1. First, the simplest usage is that we enter a string and filter out resources whose resource names contain the corresponding string. This is what we usually use. In addition, the text field also supports some keywords, for example:

This example uses the status-code keyword, followed by the status code, to select the request whose status code is 304

  1. What are the common keywords
  • Domain: swipes requests from a specific domain
  • Has-response-header: Flushs HTTP requests whose return value contains specific header information
  • Is: Yesis:runningView WebSocket resources
  • Larger-than: Filters requests whose file size exceeds a specified number. The default unit is byte
  • Method: indicates a request that selects a specific HTTP request method
  • Mime-type: a request to brush a specific MIME type
  • Mixed – the content: there aremixed-content:all 和 mixed-content:displayedTwo kinds of
  • Scheme: Swipes the request for a specific scheme
  • Set-cookie-domain: a request that selects a specific HTTP return header for the set-cookie property
  • Set-cookie-name: is also a keyword for brushing an attribute in the returned HTTP header
  • Set a cookie – value: same as above
  • Status-code: Flusher the status value of the request
  1. Pay attention to the point
  • There can be no Spaces after the colon
  • Case sensitive.
5) search

The fourth search icon opens the Search panel. The difference between Search and filter is that filter can only filter requests based on the request URL, but search can search for the content in the request and response. Aa indicates whether case is matched, and.* indicates that case is matched according to a certain format.

6) preserve log

Preserve log Indicates that the log is reserved. If this option is not selected, the log of the previous page will be cleared when switching pages. If this parameter is selected, the log of the previous page still exists when the page is switched.

7) Disable cache

Disable cache: disables cache. After this parameter is selected, the page will not obtain files from the cache.

8) Simulating network conditions

Click Online to open the simulation network option, you can debug the performance of the web page under different network conditions. This is very useful for mobile debugging

  1. For details, see the following common operations: Switching network Mode and Limiting Network Speed

  2. In addition to setting Network status in the Network panel, it can also be seen in drawers. There are two specific methods:

    • -> More tools -> Network conditions
    • Press esc to bring up the Console Drawer, also next to the Console Tab, click and select Network Conditions
9) Set icon on the right

Click the Settings icon on the right and several options appear

ⅱ – Time scale

At first, like many people, I felt dizzy when I saw this graph. It felt like it was loading, but I couldn’t tell what it meant. Here’s what it meant.

First, from left to right horizontally, you’ll see:

  • Scale: represents time
  • Horizontal lines: a horizontal line represents a resource, and the different color segments of the horizontal line represent what stage the resource is at in the loading process
  • There are two vertical lines: the first one is blue, which means the DOMContentLoaded event is triggered; The next bar is red, indicating that the load event is triggered.You can also see it from the overview panelThese two messages:

Then vertically, the colorful horizontal lines overlap and don’t overlap, indicating that the resources were loaded at the same time.

Ps: Filter requests at different times

ⅲ – Overview panel

At the bottom of the network panel, the request overview of the whole page is displayed. As can be seen from the following figure, I initiated 57 requests on the homepage of Gitee, with 38.9KB of network transmission and 5.2MB of loading resources in total. All requests were completed in 2.0min and DOM construction was completed in 1.62s. All external resources are loaded in 2.00s.

Ps: The time difference between the red and blue characters is roughly the loading time of external resources

ⅳ – Request List operation panel

The most common use of the Network panel is debugging aJax requests. Click on a request and you’ll see several labels.

1) Headers

Headers displays some basic information about a request, including the request header, response, and so on. It shows some basic request information, including request header, response header, request parameters (common), etc.

2) PreviewandResponse

Preview and Response are both displays of returned information. The difference is that Response shows the original content returned by the request; Preview is an intuitive presentation based on the different types of original content.

You can see that the data is actually the same, but in a different format

3) TimingView request parameters

Some request parameters are listed in Timing and can also be seen in Waterfall of the request list.

Application scenario: Queued indicates the queue time. A single domain name can receive a maximum of six requests. Therefore, not all requests are loaded at the beginning of the page. Started indicates the time to start the request. Optimizations can be made based on the time spent in each phase of a request

4) Modify the request list parameters that you want to display