抓包之使用chrome的network面板

写在前面

本文看下工作中非常非常常用的chrome的network面板功能。
官方介绍：地址。

1：前置

1.1：打开

右键-》检查，或者F12。

1.2：组成部分

2：控制器常用功能

详细如下图：

接着我们挑选其中一些进行演示。

2.1：preserver log

默认的当浏览器从A页面跳转到B页面之后，A页面抓到的内容就不会保留了。但是考虑这样的场景，我们在测试一个数据的保存功能，想要拿到保存的数据包内容，但是保存成功就直接跳转到数据列表页面了，开始保存的数据包已经没有了，此时就可以考虑选择preserve log的功能。
下面来演示下，首先不选中preserve log,使用地址：https://smallpdf.com/cn/split-pdf#r=organize-split
此时网络包如下：

可以看到第一个请求时split-pdf，接着点击其他功能，这里点击整理-》合并：

此时第一个请求已经时merger-pdf了。接着选中preserve log重复这个过程，就会发现第一个请求依然是split-pdf，也就是上一个页面的数据包保留了：

2.2：清除浏览器缓存

选中一个请求，右键-》clear browser cache。

2.3：修改网络情况

2.3.1：offline模拟断网

通过offline可以模拟网络断开连接的情况，就不用拔网线了😀😀😀，如下：

2.3.2：network throttling模拟网速极差情况

操作如下：



此时再刷新就转转转了：

2.4：过滤

完整的如下：

2.4.1：按照域名过滤

2.4.2：is:from-cache 过滤来自缓存的请求

2.4.3：method 过滤指定请求类型的请求

2.5：控制显示列

2.6：复制请求

2.7：查看上下游请求

按住 shift 键悬停请求上，绿色是上游，红色是下游。

写在后面

参考文章列表