使用 chrome-network 工具实现请求过滤

前言

一般前端在开发页面的时候，一般会使用浏览器自带的 network 工具来查看请求，但是在页面初始化的时候，或者复杂页面开发的时候，会发现请求栏位有非常多条，这会导致很难找到自己想要的某些请求。

这时候我们就可以通过 network 自带的一些功能来对请求进行筛选，以此来更加直观的找到自己想要的请求。

chrome 浏览器给我们自带了一系列的类型过滤条件

比较常用的基本都涵盖了，比方说你想要只看接口请求，只需要勾选 Fetch/XHR 就可以过滤其他类型，如果没有这一栏，或者请求都没有被拦截，可以检查一下上面的开关是否开启

接着来看边上的输入框 Filter 过滤

最简单的过滤就是在输入框输入接口或者文件的名字，只要包含就好了，比方说想要看 css 文件，可以输入 .css 想要看一个请求是以 xxx 结尾的，那就可以勾选接口请求并且输入 xxx

Filter 输入框还提供了一些高级过滤方法，只需要在输入框中输入 -

这里最前面的 - 用于激活提示，本身也是存在作用的，本身失去反的作用

然后来介绍其中一部分使用方法，比方说

method:POST 用于筛选请求的类型，可以传入 POST，GET 等等

status-code:200 用于筛选请求的结果code，比方说筛出 200，404 等等

这里就不对所有的过滤方法进行说明，一般简单的就够用了，感兴趣可以上网去查一下。

输入框还可以用于输入正则表达式，比方说输入 /.*png|.*gif/ 表示仅显示 png后缀和 gif后缀的请求

多条件过滤。Filter 是支持多条件过滤的，比方说当你通过 method:GET 筛选出了 GET 请求，接下来你想看看 GET 请求里面成功的请求，你就可以结合 method:GET 和 status-code:200 进行筛选，中间用空格隔开即可

单个条件取反。上面说到了 - 是用于取反，这个取反不止是可以作用在上面的高级条件上，一切的输入都可以在前面加上这个来取反，比方说 .css 是筛选出 css 后缀文件，改为 -.css 就是筛出除了 css 后缀的其他请求。
整体取反。能够单个条件取反那自然也可以整体取反，这要使用 Fliter 框右边的 Invert 选项。

结合上面说的所有技巧，就能够简单的利用 network 提供的功能来查找到你想要的请求了。

举个例子，在负责页面开发的时候，假设进入每一个页面或者一些事件都会存在埋点，但是这些埋点对于开发时或者通过请求排查问题时都是一些阻碍，我们就可以通过这个过滤，来过滤掉埋点请求，使得更加容易的找到我们想要的请求。

假设埋点a 的请求是 http://aaa 埋点b 的请求是 http://bbb

那么我们就可以通过 -aaa -bbb 这个条件来过滤掉这两个请求，更加便捷的进行开发。

本文只是简单的介绍了一部分过滤方法，当然这些肯定不是 network 工具的全部，适当的学习浏览器提供的工具可以使得开发和排查问题的流程更加的顺畅，提高研发效率。