前言
一般前端在开发页面的时候,一般会使用浏览器自带的 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
工具的全部,适当的学习浏览器提供的工具可以使得开发和排查问题的流程更加的顺畅,提高研发效率。