使用 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 工具的全部,适当的学习浏览器提供的工具可以使得开发和排查问题的流程更加的顺畅,提高研发效率。

相关推荐
GIS程序媛—椰子27 分钟前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_00133 分钟前
前端八股文(一)HTML 持续更新中。。。
前端·html
ZL不懂前端36 分钟前
Content Security Policy (CSP)
前端·javascript·面试
木舟100940 分钟前
ffmpeg重复回听音频流,时长叠加问题
前端
王大锤43911 小时前
golang通用后台管理系统07(后台与若依前端对接)
开发语言·前端·golang
我血条子呢1 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
黎金安1 小时前
前端第二次作业
前端·css·css3
啦啦右一1 小时前
前端 | MYTED单篇TED词汇学习功能优化
前端·学习
半开半落1 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt