The Network panel records information about each Network operation on the page, including detailed time consuming data, HTTP request and response headers, cookies, and more.

Overview of the Network panel

  1. Controls. Use these options to control the appearance and functionality of the Network panel.
  2. Filters. Use these options to control which resources are displayed in the Requests Table. Tip: Hold Cmd (Mac) or Ctrl (Windows/Linux) and click filters to select more than one filter at a time.
  3. The Overview. This diagram shows a timeline of resource retrieval times. If you see multiple vertical bars stacked together, these resources are retrieved at the same time.
  4. Requests the Table. This table lists each resource retrieved. By default, the table is sorted chronologically, with the oldest resource at the top. Click on the name of the resource to display more information. Tip: Right-click on any table title other than Timeline to add or remove information columns.
  5. The Summary. This pane tells you at a glance the total number of requests, the amount of data transferred, and the load time

Record network activity and screen captures

Recording network activity: A red display (with the Record button on) indicates that DevTools is recording. The display is gray (the record button is off) to indicate that DevTools is not recording. Screen shots: You can take screen shots while the page is loading

View the DOMContentLoaded and Load events

To understand these two phases, first understand the DOM document loading process:

  1. Parse the HTML structure.
  2. Load external script and style sheet files.
  3. Parse and execute the script code.
  4. Construct the HTML DOM model. // DOMContentLoaded is equivalent to ready in jQuery
  5. Load external files such as images.
  6. The page is loaded. // load

View details about a single resource

Look at the HTTP header

The Headers tag displays the request url, HTTP method, and response status code for the resource. In addition, the tag lists the HTTP response and request headers, their values, and any query string parameters.

Preview the resources

Click the Preview TAB to see a Preview of the resource. The Preview TAB may or may not show some useful information, depending on the type of resource you choose.

View the HTTP response content

Click the Response tag to view the unformatted HTTP Response content of the resource. The Preview TAB may or may not contain some useful information, depending on the type of resource you choose.

Viewing network Time

Click the Timing TAB to see a detailed breakdown of the lifecycle of a single resource request.

The life cycle shows the time spent in the following categories:

  • Queuing
  • Stalled
  • If applicable: DNS Lookup, INITIAL Connection, AND SSL Handshake
  • Request sent
  • Waiting (TTFB)
  • Content Download

It is important that more detailed processes take time if the network is abnormal

// This code can be run in the DevTools Console. It will retrieve all resources using the Network Timing API. It then filters the entries by looking for an entry that has "style.css" in its name. If found, the entry is returned. performance.getEntriesByType('resource').filter(item =>item.name.includes("style.css"))
Copy the code

Related guide: Understand Resource Timing

See the Cookie

Click the Cookies TAB to see the Cookie table transmitted in the RESOURCE’s HTTP request and response headers. This tag is only available when the Cookie is transmitted.

Look at the WebSocket framework

Click the Frames TAB to view WebSocket connection information.

This tag is displayed only if the selected resource initiates a WebSocket connection.

View resource initiators and dependencies

Hold down Shift and hover over a resource to see its originator and dependencies. This section refers to the resource you hover over as the target.

The first green coding resource above the target is the initiator of the target. If there is a second resource above that is also green-coded, then that resource will be the initiator of the initiator. Any resource coded in red below the target is a dependency of the target.

More detailed functional description = = = [Google docs] (developers.google.com/web/tools/c…). Most of the content is copied from the document, just to get your attention and give you a link to the document