首先打开调试面板「windows:F12；mac：command+option+i」，找到Network选项卡，其中是对网络相关的数据信息。

录制

控制台内容区域左上角红色按钮就是录制按钮，默认是开启状态，表示监听整个页面运行过程中所产生的所有网络请求，一般不需要关闭。

清空

录制按钮右侧的是清空按钮，点击后，会清空目前监控到的所有网络请求。

筛选

清空按钮右侧的是筛选按钮，默认为开启状态。

开启后，下方会多出几种选项，可以根据选项进行筛选。

搜索

通过搜索功能可以快速查找到对应请求

持久日志

选中Preserve log后，将开启持久日志：刷新页面后，不清空日志。

禁用缓存

未开启前，很多请求都走了磁盘缓存，开启后不再使用缓存。

限流器

可以模拟网络速度，默认有快3G、慢3G以及离线三个选项。

请求详情

点击某请求信息后，Headers选项卡中可以看到「头信息」。

Payload选项卡可以查看请求相关参数。

Preview选项卡可以对相应数据进行预览

Response选项卡表示服务器返回的原始数据。

Response返回的原始数据类型目前只支持纯文本，不支持二进制格式。

Initiator选项卡 ：请求的发起者

Timing选项卡：请求的耗时

Queueing对应排队时间：对同一域的请求，开辟的TCP连接数量有限，在同一TCP连接中，只能进行排队。

Resource Scheduling：以下的时间只是进入队列的时间，并不是排队所耗费的总时间。

Connection Start：连接开始

Stalled失速造成时间消耗，具体是因为前方有请求排队，造成了拥堵。

Request/Response：请求响应时间

• Request sent：浏览器将请求封装起来通过网络关口发出的耗时。
• Waiting for server response：等待服务器响应的耗时，此时直接收到了响应头信息，并没完全接收到相应数据。
• Content Download：内容下载时间。

Connection ID：如果ID相同，表示请求共用的同一TCP信道。

Waterfall：请求执行的先后顺序

有红蓝两条竖线，其中蓝色表示：DOMContentLoaded；红色表示：Load。