HTTP抓包

1. Chrome DevTools

1. Network功能

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

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

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

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

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

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

img

Request Table 请求列表展示如下信息，请求列表的表头右键可以配置请求列表显示的内容。

Name：资源的名称。

Status：HTTP的状态码。

Type：资源的MIME类型。

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

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

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

Timeline：请求的时间线。

右键配置请求列表：

img

2. DOMContentLoaded事件/Load事件的区别

DOMContentLoaded事件 ： 页面文档完全加载并解析完毕之后，会触发DOMContentLoaded事件

​ 体现：概览视窗的蓝色竖线，总览视窗的触发时间。

Load事件 ：当所有资源加载完成后触发的。

​ 体现：概览视窗的红色竖线，请求列表视窗的红色竖线，总览视窗的触发时间。

img

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

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

3. 资源请求

点击请求列表某个请求的名称，可以查看到该请求的详细信息。

Headers ：资源的HTTP头

Preview ：预览JSON/image/text资源

Response ：资源的HTTP响应头

Timing ：资源的请求生命周期

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

• Headers

  img

• Response

  img

• Cookies

  该域名下存储的 cookie 信息，包含 cookie 特性

  img

  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 各个阶段。

  img

4. 清除缓存和Cookie

对请求列表的请求右键，会有清除Cookie和缓存选项。

img

建议勾选 Disable cache 选项，避免缓存引起问题。**

参考资料：

​ HTTP协议Header详解

​ Chrome DevTools 之 Network，网络加载分析利器

​ wireshark怎么抓包、wireshark抓包详细图文教程