f12 Network的解析

Chrome开发者工具面板

面板上包含了Elements面板、Console面板、Sources面板、Network面板、
Timeline面板、Profiles面板、Application面板、Security面板、Audits面板这些功能面板。

这些按钮的功能点如下：

Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈。
Console:记录开发者开发过程中的日志信息，且可以作为与JS进行交互的命令行Shell。
Sources:断点调试JS。
Network:从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息（包括状态、资源类型、大小、所用时间等），可以根据这个进行网络性能优化。
Timeline:记录并分析在网站的生命周期内所发生的各类事件，以此可以提高网页的运行时间的性能。
Profiles:如果你需要Timeline所能提供的更多信息时，可以尝试一下Profiles,比如记录JS CPU执行时间细节、显示JS对象和相关的DOM节点的内存消耗、记录内存的分配细节。
Application:记录网站加载的所有资源信息，包括存储数据（Local Storage、Session Storage、IndexedDB、Web SQL、Cookies）、缓存数据、字体、图片、脚本、样式表等。
Security:判断当前网页是否安全。
Audits:对当前网页进行网络利用情况、网页性能方面的诊断，并给出一些优化建议。比如列出所有没有用到的CSS文件等。

Network主要有5个视窗，分别有不同的功能：

Controls 工具栏：用来控制Network的功能及外观。

Filters 筛选栏：根据筛选条件筛选请求列表，按住command/ctrl键可多选。

Overviews 概览：资源被加载过来的时间线，如果多条时间线垂直堆叠，表示多个资源被并行加载。

Request Table 请求列表：该视窗列出了所有的资源请求，默认按时间顺序排序，点击某个资源，可以查看更详细的信息。

Summary 总览：汇总了请求数量，传输数据大小，加载时间等信息。

Network视窗

默认情况下，Request Table 请求列表展示如下信息，当然，在请求列表的表头右键可以配置请求列表显示的内容。

Name：资源的名称。

Status：HTTP的状态码。

Type：资源的MIME类型。

Initiator：表示请求的上游，即发起者。Parser表示是HTML解析器发起的请求；Redirect表示是HTTP跳转发起的请求；Script表示是由脚本发起的请求；Other表示是由其他动作发起的请求，比如用户跳转或者在导航栏输入地址等。

Size：请求的大小，包括响应头和响应体的内容。

Time：请求的时间，从请求开始到请求完全结束。

Timeline：请求的时间线。

右键配置请求列表

怎么录制页面快照？

选中工具栏的快照图标，可以录制页面快照。

录制快照

选中某一个快照，在概览/请求列表出现的黄色竖线，就是该快照被捕捉的真实时间，双击快照可以放大。

快照捕获时间

DOMContentLoaded事件/Load事件的区别？

DOMContentLoaded事件 页面文档完全加载并解析完毕之后，会触发DOMContentLoaded事件，它在两个地方都有体现：概览视窗的蓝色竖线，总览视窗的触发时间。

Load事件 当所有资源加载完成后触发的，它在三个地方有体现：概览视窗的红色竖线，请求列表视窗的红色竖线，总览视窗的触发时间。

DOMContentLoaded/Load事件

结合DOM文档加载的加载步骤，DOMContentLoaded事件/Load事件触发时机如下：

解析HTML结构。
加载外部脚本和样式表文件。
解析并执行脚本代码。// 部分脚本会阻塞页面的加载
DOM树构建完成。//DOMContentLoaded 事件
加载图片等外部文件。
页面加载完毕。//load 事件

资源请求明细包含了哪些信息？

点击请求列表某个请求的名称，可以查看该请求的详细信息。详细信息主要有4个方面：

Headers：资源的HTTP头

Preview：预览JSON/image/text资源

Response：资源的HTTP响应头

Timing：资源的请求生命周期

Cookies：查看HTTP请求头和响应头附带的cookie信息

查看HTTP头：包含了资源的请求URL，HTTP方法，响应的状态码。此外，还列出了HTTP请求头和响应头及其值，以及请求参数。

HTTP头

查看HTTP响应内容：可以清楚的看到HTTP请求的返回结果。

HTTP响应

资源预览：没什么好讲的，可以查看JSON/image/text等资源。

资源预览

Cookies：该域名下存储的cookie信息，其中包含了cookie的特性。

Name：cookie的名称。

Value：cookie的值。

Domain：cookie所属域名。

Path：cookie所属URL。

Expire/Max-Age：cookie的存活时间。

Size：cookie的字节大小。

HTTP：表示cookie只能被浏览器设置，而且JS不能修改。

Secure：表示cookie只能在安全连接上传输。

Timing：查看资源请求的生命周期，包含Queing/Stalled/Request/Response/Request sent/Waiting/Content Download各个阶段。

Timeing

如何查看资源请求的上游和下游？

按时shift键，鼠标hover在请求上，可以查看请求的上游和下游，如下图所示，hover在common.js上，可以看到有一个绿色请求、一个红色请求。其中绿色请求表示common.js的上游请求，即谁触发了common.js请求，红色请求表示common.js的下游请求，即common.js又触发了什么请求。

查看上下游请求

想对请求列表排序？

请求列表的资源默认是按照起始时间排序，最上面的请求最先发起。点击表头的Timeline可以重新排序，主要有如下几个维度。

Timline - Start Time：按请求的发起时间排序。

Timline - Response Time：按请求的响应时间排序。

Timline - End Time：按请求的结束时间排序。

Timline - Total Duration：按请求的总耗时排序，可以快捷的找出耗时最多的资源。

Timline - Latency：按请求的延迟排序，延迟是指请求发起的时间到响应开始的时间，可以快捷的找出请求等待时间最长（TTFB）的资源。

按Timeline排序

想对请求进行筛选？

通过筛选视窗可以对请求进行多维度的筛选，按住Command/Ctrl键可以同时选择多个筛选条件。

多个筛选条件

此外，筛选框可以实现很多定制化的筛选，比如字符串匹配，关键词筛选等，其中关键词筛选主要有如下几种：

domain：筛选出指定域名的请求，不仅支持自动补全，还支持*匹配。

has-response-header：筛选出包含指定响应头的请求。

is：通过is:running找出WebSocket请求。

larger-than：筛选出请求大于指定字节大小的请求，其中1000表示1k。

method：筛选出指定HTTP方法的请求，比如GET请求、POST请求等。

mime-type：筛选出指定文件类型的请求。

mixed-content：筛选出混合内容的请求（不懂啥意思）。

scheme：筛选出指定协议的请求，比如scheme:http、scheme:https。

set-cookie-domain：筛选出指定cookie域名属性的包含Set-Cookie的请求。

set-cookie-name：筛选出指定cookie名称属性的包含Set-Cookie的请求。

set-cookie-value：筛选出指定cookie值属性的包含Set-Cookie的请求。

status-code：筛选出指定HTTP状态码的请求。

主流的几个筛选截图如下：

domain筛选

has-response-header筛选

larger-than筛选

method筛选

Mime-type筛选

set-cookie-name筛选

如何模拟不同的网络环境？

Network > Filters 筛选栏下有可以模拟不同网络环境下的选项，对于模拟测试低网速环境，以及针对低网速环境做加载优化很有帮助。

模拟网络环境

如何清除缓存和Cookie？

在Network的请求列表视窗中，右键也提供了清除Cookie和缓存的选项。

Paste_Image.png

另外，调试模式下，强烈建议勾选Disable cache选项，以避免缓存引起的一些诡异问题

作者：齐修_qixiuss
链接：https://www.jianshu.com/p/471950517b07
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。