Detailed explanation of Chrome developer tools (2) - Network panel

Note:  This article mainly explains the panel Network, referring to Google's related documents, mainly for the company's internal technology sharing .

Chrome Developer Tools Panel

The panel includes Elements panel, Console panel, Sources panel, Network panel,
Timeline panel, Profiles panel, Application panel, Security panel, Audits panel these functional panels.

The functions of these buttons are as follows:

• Elements : Find any element in the HTML of the source code of the web page, manually modify the attributes and styles of any element, and get feedback in the browser in real time.
• Console : Records the log information during the developer's development process, and can be used as a command-line shell for interacting with JS.
• Sources : Breakpoints to debug JS.
• Network : Analyze the resource information of each request (including status, resource type, size, time taken, etc.) obtained after the HTTP request is initiated after requesting the web page, and network performance can be optimized based on this.
• Timeline : Record and analyze various events that occur during the life cycle of the website, so as to improve the performance of the running time of the web page.
• Profiles : If you need more information that Timeline can provide, you can try Profiles , such as recording JS CPU execution time details, showing memory consumption of JS objects and related DOM nodes, and recording memory allocation details.
• Application : Record all resource information loaded by the website, including storage data (Local Storage, Session Storage, IndexedDB, Web SQL, Cookies), cached data, fonts, pictures, scripts, style sheets, etc.
• Security : Determine whether the current web page is secure.
• Audits : Diagnose the network utilization and performance of the current web page, and give some optimization suggestions. For example, list all unused CSS files, etc.

Network panel

Overview

NetworkThe panel can record the detailed information of the network request on the page, and analyze the information of each request resource (including status, resource type, size, time used, Request and Response, etc.) obtained after the HTTP request is initiated after the web page request Request is initiated. Perform network performance optimization.

I posted the picture of the Network panel on Google's official website here. The panel mainly includes 5 large panes (Pane):

1. Controls  control the appearance and functionality of the Network .
2. Filters  control what exactly is displayed in the Requests Table .
3. Overview  displays the time axis information of the acquired resources.
4. The Requests Table  displays all acquired resource information in the order of resource acquisition. Click the resource name to view the detailed information of the resource.
5. Summary  shows the total number of requests, data transfer, and load time information.

The  Requests Table  displays the following information columns:

• Name  Resource name, click the name to view the details of the resource, including Headers, Preview, Response, Cookies, Timing.
• Status  HTTP status code.
• Type  The requested resource MIME type.
• Initiator  marks which object or process initiated the request (request source).
• Parser: The request was made by Chrome's HTML parser.
• Redirect: The request was initiated by an HTTP page redirect.
• Script: The request is initiated by a Script script.
• Other: The request is initiated by another process, for example, the user clicks a link to jump to another page or enters the URL address in the address bar.
• Size  Downloaded file and requested resource size from the server. If the resource is obtained from the cache, this column will display (from cache)
• Time  The time of the request or download, the total time taken from initiating the Request to getting the Response.
• Timeline  displays the visual waterfall flow (time status axis) of all network requests. Click the time axis to view the detailed information of the request, and click the column header to sort according to the specified field.

capture screen

ControlsThe functions included in the pane include network log recording, log cleaning, screen capture, filters, view switching, log retention switch, cache switch, network connection switch, and network speed threshold.

Take screen capture as an example, click the camera button (capture screen) and reload the page to capture the screen.

双击其中的截屏可以放大显示，在放大的图下方可以点击跳转到上一帧或者下一帧。

单击则可以查看该帧被捕获时的网络请求信息，并且在Overview上会有一条黄色竖线以标记该帧被捕获的具体时间点。

查看DOMContentLoaded和load事件信息

DOMContentLoaded和load这两个事件会高亮显示。

DOMContentLoaded事件会在页面上DOM完全加载并解析完毕之后触发，不会等待CSS、图片、子框架加载完成。
load事件会在页面上所有DOM、CSS、JS、图片完全加载完毕之后触发。

DOMContentLoaded事件在Overview上用一条蓝色竖线标记，并且在Summary以蓝色文字显示确切的时间。

load事件同样会在Overview和Requests Table上用一条红色竖线标记，在Summary也会以红色文字显示确切的时间。

查看具体资源的详情

通过点击某个资源的Name可以查看该资源的详细信息，根据选择的资源类型显示的信息也不太一样，可能包括如下Tab信息：

• Headers 该资源的HTTP头信息。
• Preview 根据你所选择的资源类型（JSON、图片、文本）显示相应的预览。
• Response 显示HTTP的Response信息。
• Cookies 显示资源HTTP的Request和Response过程中的Cookies信息。
• Timing 显示资源在整个请求生命周期过程中各部分花费的时间。

针对上面4个Tab进行详细讲解一下各个功能：

① 查看资源HTTP头信息

在Headers标签里面可以看到HTTP Request URL、HTTP Method、Status Code、Remote Address等基本信息和详细的Response Headers
、Request Headers以及Query String Parameters或者Form Data等信息。

② 查看资源预览信息

在Preview标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应的预览信息。下图显示的是当选择的资源是JSON格式时的预览信息。

③ 查看资源HTTP的Response信息

在Response标签里面可根据选择的资源类型（JSON、图片、文本、JS、CSS）显示相应资源的Response响应内容。下图显示的是当选择的资源是CSS格式时的响应内容。

④ 查看资源Cookies信息

如果选择的资源在Request和Response过程中存在Cookies信息，则Cookies标签会自动显示出来，在里面可以查看所有的Cookies信息。

⑤ 分析资源在请求的生命周期内各部分时间花费信息

在Timing标签中可以显示资源在整个请求生命周期过程中各部分时间花费信息，可能会涉及到如下过程的时间花费情况：

• Queuing 排队的时间花费。可能由于该请求被渲染引擎认为是优先级比较低的资源（图片）、服务器不可用、超过浏览器的并发请求的最大连接数（Chrome的最大并发连接数为6）.
• Stalled 从HTTP连接建立到请求能够被发出送出去(真正传输数据)之间的时间花费。包含用于处理代理的时间，如果有已经建立好的连接，这个时间还包括等待已建立连接被复用的时间。
• Proxy Negotiation 与代理服务器连接的时间花费。
• DNS Lookup 执行DNS查询的时间。网页上每一个新的域名都要经过一个DNS查询。第二次访问浏览器有缓存的话，则这个时间为0。
• Initial Connection / Connecting 建立连接的时间花费，包含了TCP握手及重试时间。
• SSL 完成SSL握手的时间花费。
• Request sent 发起请求的时间。
• Waiting (Time to first byte (TTFB)) 是最初的网络请求被发起到从服务器接收到第一个字节这段时间，它包含了TCP连接时间，发送HTTP请求时间和获得响应消息第一个字节的时间。
• Content Download 获取Response响应数据的时间花费。

TTFB这个部分的时间花费如果超过200ms，则应该考虑对网络进行性能优化了，可以参见网络性能优化方案及里面的相关参考文档。

查看资源的发起者(请求源)和依赖项

通过按住Shift并且把光标移到资源名称上，可以查看该资源是由哪个对象或进程发起的（请求源）和对该资源的请求过程中引发了哪些资源（依赖资源）。

在该资源的上方第一个标记为绿色的资源就是该资源的发起者（请求源），有可能会有第二个标记为绿色的资源是该资源的发起者的发起者，以此类推。

在该资源的下方标记为红色的资源是该资源的依赖资源。