This is the first day of my participation in the Gwen Challenge in November. Check out the details: the last Gwen Challenge in 2021

This article introduces the Network panel in Chrome.

Open the way

  1. On Chrome, press F12
  2. Right-click on Chrome and select Check
  3. Control + Shift + J(Windows, Linux) or Command + Option + J(Mac OS) on Chrome

The whole figure

After the NetWork panel is opened in the preceding manner, the following interface is displayed. It is mainly composed of five regions.

  1. Controller: The appearance and functions of the control panel.
  2. Filter: To filter resources displayed in the request list, hold down Command (Mac) or Ctrl (Window/Linux) and click filter to select multiple filters at once.
  3. Overview: Displays the timeline of HTTP requests and responses, and shows the contours of requests.
  4. Request list: Default time sort, optionally display column. You can see all resource requests, including network requests, image resources, HTML, CSS, JS files and other requests. You can filter request items according to requirements. Generally, it is used for viewing and analyzing network requests, analyzing whether the back-end interface is correctly transmitted, whether the data obtained is accurate, and viewing request headers and request parameters.
  5. Summary: total requests, total data, total time spent, etc.

The controller

  1. Stop recording/Record Network Log Capture or Stop capture.
  2. Clear Clears requests from the request list.
  3. Filter Displays or hides the Filter.
  4. Search Search.
  5. Preserve Log, if selected, preserves the previous request and can be used when the page jumps.
  6. Disable Cache Disables the browser cache.
  7. No Throttling can switch network status to simulate weak network environment.
  8. More Network Conditions
  9. Import/export HAR files.

The filter

Click the Filter button in the controller to display the Filter.

  1. Text box filter.
  2. Invert the choice.
  3. Hide data URLS URLS prefixed with the data: protocol that allow content creators to embed small files into documents. For example: display pictures in Base64.
  4. Specific type screening, All (All), XHR (XMLHttpRequest and FETCH), JS (JavaScript), CSS (style sheets), Img (image resources), Media (Media resources), Font (Font resources), Doc (Documents), WS (WebSocket), Wasm (WebAssembly), MainFest, Other.
  5. Has Blocked cookies: Whether cookies that are Blocked are displayed; Blocked requests: Whether blocked requests are displayed.

An overview of

After showOverview is selected, the outline is displayed.

Request list

Right-click at Name to select/cancel the fields displayed.

  • Name: indicates the resource Name.
  • URL: The requested URL.
  • Method: Request Method, such as GET and POST.
  • Status: indicates the HTTP Status code.
  • Protocol: Request Protocol.
  • Domain: indicates the Domain name.
  • Type: MIME Type of the requested resource.
  • Initiator: Object or process that initiates a request. It may have the following values:
    • Parser: Chrome’s HTML Parser initiates the request (hover over to display javascript scripts).
    • Redirect: HTTP redirects initiate the request.
    • Script: The Script initiates the request.
  • Cookies: The number of Cookies contained in the request.
  • Size: response Size (including header and package body) returned by the server. The Size can be displayed after decompression.
  • Time: Total duration, from the beginning of the request to the last byte in the received response.
  • ConnectionId: indicates the link ID.
  • Waterfall: Visual analysis chart of activities related to each request.

  • Queuedat: time to execute the Initator
  • Startedat: Time to start the request process
  • Queueing: A request with a high priority has been made, the number of TCP links has been reached, and the browser is temporarily allocating space in the disk cache
  • 例 句 : time spent waiting in line
  • DNSLookup: DNS lookup IP address
  • Initialconnection: Initializes the connection
  • Proxynegotiation: Agent negotiation
  • Requestsent: Indicates that the request is sent
  • ServiceWorkerPreparation: The browser is ready to start ServiceWorker
  • RequesttoServiceWorker: sends a request to the ServiceWorker
  • Waiting(TTFB) : time for the first byte to return. TTFB represents the time to the first byte. This time includes a round-trip delay and the time it takes the server to prepare a response.
  • ContentDownload: The browser is receiving the response
  • ReceivingPush: The browser is pushing data over the HTTP/2 server
  • ReadingPush: The browser is reading previously received local data

The profile

  • Requests: Checking Hide data URLs will block resources that begin with Data:.
  • Transferred: Compressed size of all resources i.e. size of resources transferred over the network.
  • Resources: Uncompressed size of all resources.
  • Finish: The total time it took for all HTTP requests on the page to be sent to complete responses.
  • DOMContentLoaded: The time when the DOM tree is completed.
  • Load: indicates the time when the page is loaded.

One last word

If this article is helpful to you, or inspired, help pay attention to it, your support is the biggest motivation I insist on writing, thank you for your support.