Chrome Devtools-network--Reprint

Reprint Address: 1190000008407729

Log network Requests

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

Stop Logging Network requests

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

• Networkunder the panel, Command+E(Mac) 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, the Network Network request Log table under the panel is also refreshed. If you want to keep the network request data from the previous page, you can check it Preserve log .
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 in the Network panel request record is refreshed so that the login/registration interface returned by the situation. At this point Preserve log , whether you jump to that page, you can Network see the previous interface return in the Network 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 on the Capture screenshots 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 line in and out of the window, and the Overview Waterfall 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 the drop Network Throttling -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 conditions: Open Network Throttling menu, select Custom > Add .

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

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 select Clear Browser Cache or Clear Browser Cookies .

Overwrite User agent

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

NetworkWhen the drawer panel is open, uncheck Select automatically 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 the Command(Mac) key or Ctrl(Windows,Linux) key, and then click a different type, such as Click JS and Img , then filter out the JS files and pictures. Obviously, All unlike other types, it is not possible to select a All specific type at the time of selection.

Hide data URLs

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

Filter by Time

Click the icon in the green box to show/hide the Overview 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, click to Size Sort by resource from small to large or from big to small (click Size Auto Toggle).

Sort by the different stages of the request

In the request table, right-click the column header, and then move the mouse to Waterfall , 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 selection Total Duration is Waterfall 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 and hold the Shift 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 DOMContentLoaded load time corresponding to the event when it occurs in multiple places. The DOMContentLoaded event corresponds to a blue line (or text), and the load event corresponds to a red line (or text)

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--Reprint