Chrome DevTools之Network
简介
Network面板可以记录页面上的网络请求的详情信息,从发起网页页面请求Request后分析HTTP请求后得到的各个请求资源信息(包括状态、资源类型、大小、所用时间、Request和Response等),可以根据这个进行网络性能优化。
Network主要有5个视窗,分别有不同的功能:
- Controls 工具栏:用来控制Network的功能及外观。
- Filters 筛选栏:根据筛选条件筛选请求列表,按住command/ctrl键可多选。
- Overviews 概览:资源被加载过来的时间线,如果多条时间线垂直堆叠,表示多个资源被并行加载。
- Request Table 请求列表:该视窗列出了所有的资源请求,默认按时间顺序排序,点击某个资源,可以查看更详细的信息。
- Summary 总览:汇总了请求数量,传输数据大小,加载时间等信息。
默认情况下,Request Table 请求列表展示如下信息,当然,在请求列表的表头右键可以配置请求列表显示的内容。
- Name:资源的名称。
- Status:HTTP的状态码。
- Type:资源的MIME类型。
- Initiator:表示请求的上游,即发起者。Parser表示是HTML解析器发起的请求;Redirect表示是HTTP跳转发起的请求;Script表示是由脚本发起的请求;Other表示是由其他动作发起的请求,比如用户跳转或者在导航栏输入地址等。
- Size:请求的大小,包括响应头和响应体的内容。
- Time:请求的时间,从请求开始到请求完全结束。
- Timeline:请求的时间线。
chorme录制页面快照
选中工具栏的快照图标,可以录制页面快照。
选中某一个快照,在概览/请求列表出现的黄色竖线,就是该快照被捕捉的真实时间,双击快照可以放大。
我们可以利用此功能清楚的知道我们的页面上每部分的渲染顺序,优化首屏加载等。
DOMContentLoaded事件/Load事件的区别
- DOMContentLoaded事件 页面文档完全加载并解析完毕之后,会触发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请求的返回结果。
资源预览:没什么好讲的,可以查看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各个阶段。
如何查看资源请求的上游和下游
按时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)的资源。
对请求进行筛选
通过筛选视窗可以对请求进行多维度的筛选,按住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状态码的请求。
删选功能的右侧标签可以快捷的对请求进行过滤:
- ALL: 默认展出的是ALL(所有请求)
- Hide data URLs:这个是过滤data协议的东西(比如base64的图片),若是页面请求非常多的情况下,勾选这个,可以让我们更快速的定位一些请求
- WS: 筛选所有的WebSocket类型的请求
WebSocket协议是基于TCP的一种新的网络协议。它实现了浏览器与服务器全双工(full-duplex)通信——允许服务器主动发送信息给客户端。
- XHR: 筛选所有的XHR类型的请求
XHR(XMLHttpReques)是一种浏览器API,极大简化了异步通信的过程,开发者并不需要关注底层的实现,因为浏览器会为我们完成这些工作,如连接管理、协议协商、HTTP请求格式化等等
XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应,并且能够以文本或者一个 DOM 文档的形式返回内容。
模拟不同的网络环境
Network > Filters 筛选栏下有可以模拟不同网络环境下的选项,对于模拟测试低网速环境,以及针对低网速环境做加载优化很有帮助。
清除缓存和Cookie
在Network的请求列表视窗中,右键也提供了清除Cookie和缓存的选项。
另外,调试模式下,强烈建议勾选Disable cache选项,以避免缓存引起的一些诡异问题。