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

前言

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

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

通过请求类型简单过滤

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

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

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

一般过滤

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

高级过滤

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

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

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

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

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

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

正则表达式过滤

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

一些整合的小技巧

  1. 多条件过滤。Filter 是支持多条件过滤的,比方说当你通过 method:GET 筛选出了 GET 请求,接下来你想看看 GET 请求里面成功的请求,你就可以结合 method:GETstatus-code:200 进行筛选,中间用空格隔开即可
  1. 单个条件取反。上面说到了 - 是用于取反,这个取反不止是可以作用在上面的高级条件上,一切的输入都可以在前面加上这个来取反,比方说 .css 是筛选出 css 后缀文件,改为 -.css 就是筛出除了 css 后缀的其他请求。
  2. 整体取反。能够单个条件取反那自然也可以整体取反,这要使用 Fliter 框右边的 Invert 选项。

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

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

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

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

总结

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

相关推荐
婷婷婷婷2 分钟前
v-copyText 自定义指令 —— 复制文本内容
前端
waylon111133 分钟前
【HOC】高阶组件在Vue老项目中的实战应用 - 模块任意排序
前端·vue.js·面试
阳阳羊4 分钟前
Mpx 动画
前端
编程社区管理员5 分钟前
「2025最新版React+Ant Design+Router+TailwindCss全栈攻略:从零到实战,打造高颜值企业级应用
前端·react.js·前端框架
DJA_CR5 分钟前
解决在 TSX 中使用 `RouterView` + `KeepAlive` 不生效问题
前端·vue.js
前端爆冲15 分钟前
项目中无用export的检测方案
前端
热爱编程的小曾43 分钟前
sqli-labs靶场 less 8
前端·数据库·less
gongzemin1 小时前
React 和 Vue3 在事件传递的区别
前端·vue.js·react.js
Apifox1 小时前
如何在 Apifox 中通过 Runner 运行包含云端数据库连接配置的测试场景
前端·后端·ci/cd
树上有只程序猿2 小时前
后端思维之高并发处理方案
前端