使用 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 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜4 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui