Chrome Devtools--network

Log network Requests

By default, as long as Devtools is on, devtools logs all network requests and, of course, the records are displayed Network on the panel.

Stop Logging Network requests

• Click Stop recording network log on the red icon, when it turns gray, indicates that Devtools is not in the record request

• Command+E(Mac) under the Network panel, orCtrl+E(Windows,Linux)

Clear Network Requests

Keep network request records when loading across pages

When the page is overloaded or the page jumps, by default Network , the Network request Log table under the panel is also refreshed. If you want to keep the network request data from the previous page Preserve log , you can check it.
A common Application scenario: Login/Registration will invoke the login/Registration API, the developer would like to see the interface returned, but the login/registration will generally jump to the new page, resulting Network in the panel request record is refreshed so that the login/registration interface returned by the situation. At this point Network , whether you jump to that page, you can see the previous interface return in the network Preserve log request log table.

Capture screen when page loads

The capture screen analyzes what the user sees in a different time period during page loading.
Click Capture screenshots on the icon to turn on capture, and when the icon turns blue indicates that it is turned on, reload the page to see a different time screen.

After capturing the screen, you can do the following:

• When the mouse hovers over a picture, a yellow border appears around the picture, and there is a yellow vertical Overview line Waterfall in and out of the window, and the yellow vertical line indicates the capture time of the picture.

• Click on a picture to filter out all requests that occurred after this image was captured

• Double-click the picture to enlarge the picture

Changing the condition of page loading disable browser caching

During the HTTP request, some resources are cached in the browser after the page is first loaded, which is the resource with a status code of 304. In order to simulate as accurately as possible the first time a user loads our web page, we need to disable the browser cache, so that each request is sent from the server, more accurately reflect the actual situation of the initial loading of the page.

Simulating speed conditions

In Network Throttling the drop-down box you can select different network conditions for simulation, such as 2G, 3G, 4G, WiFi, and so on.

In addition to selecting an existing network option, you can also customize the speed related Network Throttling conditions: Open Custom > Add menu, select.

Another kind of simulation situation is special, is no network. With,PWA (Progressive Web Apps) can still be used without a network. service workers Simulation of this network-free environment, Offline directly tick.

Tip: Sometimes developers will see Network A warning icon on the left, which indicates that the developer is currently under simulated network conditions.

Manually clear browser cache, cookies

Right-click on the network Request records table and Clear Browser Cache select Clear Browser Cookies or.

Overwrite User agent

Open Network drawer Panel: Under Devtools, press Esc the key to bring up the Devtools drawer panel, you can select and Toggle different tab options.

NetworkWhen the drawer panel is Select automatically Open, uncheck the box and select a user agent or customize one.

Filtering requests are filtered based on attributes

That funnel, yes, that's it, click the Funnel icon to turn its color to blue, and then you can further filter the data in the Network request table.

In the input box you can enter some string, domain, size, status code, media type and so on, if the business is relatively simple, you may enter some strings to search for the results you want. You can enter a detailed type to refer to the official documentation.

Filter by Type

Here is the choice: Press and hold Command(Mac) the key Ctrl(Windows,Linux) or key, and then click a different type, JS such Img as click and, then filter out the JS files and pictures. Obviously, All Unlike other types, it is not All possible to select a specific type at the time of selection.

Hide data URLs

data URLsRefers to some small files embedded in the document, in the request table data: in the beginning of the file is, such as the more common SVG file. Hide data URLs Check the box to hide this type of file.

Filter by Time

Click the icon in the green box to show/ Overview hide the window. by Overview dragging the sliders in the left or right orange circles on the window, you can filter out requests that are made between the two sliders, and the requests that are not made during this time are hidden.

Sort the request table by the type of the column

Click the column header of each column in the request table to sort by the appropriate type, for example Size , click to sort by resource from small to large or from big to small Size (click Auto Toggle).

Sort by the different stages of the request

In the request table, right-click the column header, and Waterfall then move the mouse to, and then select the following options, which are sorted by default in short to long order:

• Start Time: Time of Request start (default)

• Response Time: The time when the resource started downloading

• End Time: The time the request ended

• Total Duration: The entire duration of the request (initiated to the end of the download)

• LatencyTime the request waits for a response

For example, the Total Duration selection Waterfall is as follows:

Note: The different colors in the representative of different file types, such as JS, IMG, CSS and so on. Each requested waterfall stream image is divided into light and dark parts, the light part represents the wait time, the dark part indicates the download time, such as 129ms is the wait time, 110ms is the time spent downloading resources.

Analysis Request View Request record

The Request table displays the following by default:

• Name: filename of the file or identifier of the resource

• Status: HTTP State code

• type: The MIME type of the request resource

• Initiator: The following object or process can initiate a request

  • Parse: HTML parser for Chrome

  • Redirect: http redirection

  • Script: JS function

  • Other: Some other processing or operation, such as navigating to a page via a link, or entering an address in the browser's address bar and then enter

• Size: Response header size + response body size

• Time: Total duration, from originating request to resource download complete

• Waterfall: Visual presentation of the different stages of each request activity

Add or Remove Columns

Right-click on the head of the request table to select an option to make it visible or hidden.

Add a custom column

Right-click on the header of the request table,Response Headers > Manage header Columns

View Request time

The amount of time and order in which a request is Waterfall viewed in relation to other requests. The default is to sort by the time the request was initiated, so the more left-side requests in the waterfall flow, the sooner the time is initiated.

Headers: View request headers, response headers, and request parameters

Under Column Name , click the URL of a request to see the details of the request and response.

By default, the request and response headers are the names of the HTTP headers displayed in alphabetical order, and if you want to display them in the order in which they are actually received, click on the View sourceand click on the view parsed.
In the Headers tab, you can also view the requested parameters in the Orange Box section. There are also view source and view parsed, plus the parameter encoding format (view URL encoded) and the decoding format (view decoded).

Preview: View a preview of the response body Response: View the response body Cookies: View Cookies Timing: View the time that the request corresponds at each stage

The meaning of each time period:

• queueing: The browser queues the request in the following situations:

  • Higher-Priority requests

  • Under this domain, there are already 6 TCP connections, reaching the maximum limit of chrome. This rule applies only to http/1.0 and http/1.1

• stalled: any of the factors inqueueing can cause the request to be delayed

• Proxy Negotiation: The time spent by the browser in negotiation with the proxy server

• DNS Lookup: The time spent by the browser on DNS lookups of the requested IP address

• Initial conncection: Time spent initiating a connection

• Request sent: time spent sending requests

• Waiting (TTFB): The time that the browser waits for a response,TTFB .

• Content Download: Time spent on resource downloads

View the originating and dependent objects of a request

A brief introduction to the initiator of the request table indicates which object or processing operation originated the request. If the B request was initiated by a request, it is clear that a is the initiator of B and B is a dependent object (b relies on a).
Press Shift and hold the key, and then hover over a request, the originating object of the request is a green flag, and the dependent object of the request is marked by a red flag.

Viewing load Events

Devtools shows the time corresponding to DOMContentLoaded the load event when it occurs in multiple places. The event corresponds to a blue line (or text load ), and the event corresponds to a red line (or text) DOMContentLoaded

View the total number of requests and total size

Note: The data here represents the data for the request that was recorded after the Devtools is opened, and if some requests have occurred before Devtools opened, the data for these requests is not counted here.

Change NetworkLayout of the Panel

• Filter display hidden (already introduced)

• Overview window display hidden (already introduced)

• The request form has two different displays, the simple version and the detailed version.

Click on the icon to toggle between the two display modes. When the icon is blue, it represents the detailed version, which is a simple version when grayed out.

Let's take a look at the differences between the two display modes:

In fact, the detailed version is more than provide a part of the information:

• The Name column has a line of gray text that indicates the path to the resource

• The Status column has more than one line of gray text, which indicates the text of the HTTP status code

• initiator column with a line of gray text indicating the type of initiating object

• the Size column has more than one line of gray text, indicating the actual size of the resource
  The first row of data in the size column represents the sum of the size of the request header and the request body, and because of the multiplicity of HTTP requests, the size of the first row of data and the size of the second row of data are different, it is possible that the first row of data is larger than the second row of data, or the first row of data is smaller There are several reasons for this:

  • Have a response header, even including a cookie (First > second row)

  • The request is cached (typically, the first row < the second row)

  • Server-side GIZP compression (typically, first < second row)

• Time column has more than one line of gray text, indicating when the request waits for a response

Chrome Devtools--network