浏览器请求拦截利器：RouteInterceptor

在日常测试开发中，"抓取接口参数"是高频操作——但很多时候我们只想拿到参数，并不希望请求真的下发。这篇文章讲清楚为什么要拦截、传统方案的痛点，以及如何用 Chrome 插件 RouteInterceptor 一键解决。

写在前面

完整源码领取：关注公众号【Code自习室】，回复后台回复RouteInterceptor获取

一、痛点：抓参数 ≠ 真发请求

测试同学和前端开发同学应该都遇到过这样的场景：

场景 1：调试创建资源接口

测试"创建云主机"接口时，想看前端到底下发了哪些参数。

习惯动作：F12 → Network → 点"创建" → 看请求详情
副作用：请求真的下发，云主机真的被创建
后果：测试环境堆了一堆"测试云主机"，要手动清理；忘了清理还会污染后续测试数据

场景 2：调试删除接口

更狠的是删除接口。前端按钮一点，云主机真的被删——可能删的是别人的、可能删的是生产（接口配错）、可能触发关联资源级联删除。

场景 3：前端联调只验证字段格式

参数格式对不对、字段名是不是后端要的、必填字段是否齐全——这些不需要后端真的处理，前端拿到参数就能验证。但浏览器一旦发请求，后端就开始走业务逻辑了。

场景 4：复现 Bug 不污染数据

复现"提交表单参数错误"的 bug，需要多次尝试。每次都真实提交，数据库里就多一堆脏数据。

核心需求：在浏览器层拦截，请求不出浏览器就拿到参数——既不污染环境，也无需任何额外配置。

二、RouteInterceptor 是什么

RouteInterceptor 是一个 Chrome 浏览器插件，专门用于拦截特定路由的请求。在进行 API 调试时，可以避免不必要的请求下发导致的数据变动，提高效率。

核心能力：

请求拦截：拦截指定 API 路由或指定请求方式，防止实际请求被发送
可自定义路由：允许用户在插件界面输入需要拦截的请求路径
临时启用/禁用：用户可以快速启用或禁用请求拦截功能
UI 界面：提供简单的用户界面，零上手门槛

三、源码获取：关注公众号免费领取

RouteInterceptor 的完整源码（后台脚本、弹窗 UI、manifest 配置、图标资源）已整理好。由于浏览器插件源码在多数技术社区审核较严，这里统一放到公众号后台，关注并回复关键词即可获取。

源码包内容

RouteInterceptor/
├── manifest.json          # MV3 配置（权限、入口、图标）
├── background.js           # 后台逻辑（declarativeNetRequest 规则同步）
├── popup.html              # 弹窗 UI（方法按钮 + 路由输入 + 规则列表）
├── popup.js                # 弹窗交互（chrom.storage 持久化 + 规则管理）
├── imgs/                   # 图标 + 使用截图
└── README.md               # 使用说明

领取方式

两步搞定：

关注公众号：【Code自习室】
后台回复关键词：RouteInterceptor

后台会把下载链接自动推送给你，永久有效，后续有功能更新也会同步推送。

四、两种拦截模式详解

RouteInterceptor 实质上是两种拦截模式并存：

模式 1：按方法拦截

适合"调试只读场景"——把所有写操作拦下，但放行读操作。

例如调试创建资源相关接口，把 POST PUT DELETE PATCH 都打开（红色），GET 关闭（绿色）：

浏览器可以正常 GET 列表数据，页面不会崩
任何写操作都被拦下，不会污染数据

模式 2：按路由关键字拦截

适合"精准拦截特定接口"——只拦某条/某类接口。

例如：

输入	匹配范围
`/api/v1/resources/create`	精准匹配该路径
`/resources/`	所有路径含 `/resources/` 的请求
`create`	所有路径含 `create` 关键字的请求

两种模式叠加

可以同时启用——例如 POST 拦截 + 关键字 /resources/create。两条规则都匹配时，请求被拦截（block 是任一命中即生效）。

五、安装与上手

安装步骤

1. 下载源码到本地
2. 打开 Chrome → 地址栏输入 chrome://extensions/
3. 右上角开启「开发者模式」
4. 点击「加载已解压的扩展程序」
5. 选择 RouteInterceptor 文件夹
6. 浏览器工具栏出现插件图标即安装成功

使用流程

点击插件图标 → 弹出 popup 面板
按需切换方法按钮（红色=拦截、绿色=放通）
输入路由关键字 → 点"添加路由"
去目标页面操作 → 触发请求 → 自动被拦截

拦截效果演示

六、典型使用场景

场景 1：调试创建资源接口（不真的创建）

添加路由规则：/api/v1/resources/create
启用拦截
在页面上点"创建"按钮
浏览器面板里看到完整请求参数，后端没收到任何请求
验证完关掉规则即可

场景 2：复现"提交表单参数错误"Bug

拦截 POST /api/v1/form/submit
反复点击提交，每次都拿到完整参数
对比正常/异常提交的参数差异
数据库 0 污染

场景 3：联调前端字段格式

拦截目标接口
前端代码改动 → 提交 → 看参数 → 改动 → 再提交 → 再看
不需要后端配合，前端独立完成字段格式验证

场景 4：只读调试（拦截所有写操作）

5 个方法按钮中：

GET → 放通（绿色）
POST / PUT / DELETE / PATCH → 拦截（红色）

页面可以正常浏览，但任何"修改"操作都会被拦下——最适合做演示、QA 复查、回归测试。

七、与 Charles / Fiddler / Mock 服务对比

维度	RouteInterceptor	Charles / Fiddler	Mock 服务
安装成本	Chrome 插件，一键装	装 App + 配代理 + 信任证书	起本地服务
工作层级	浏览器内核	系统代理	网络层
HTTPS 抓包	原生支持	需配证书	需配证书
拦截粒度	URL 关键字 + Method	URL / Host / Path	完全自定义
修改响应	当前版本仅 block	支持	支持
团队共享规则	通过 storage 同步	导出配置	仓库管理
适合人群	测试 / 前端	抓包重度用户	联调/Mock

推荐组合：

日常调试 / 快速复现：RouteInterceptor（轻量、零配置）
复杂抓包 / 协议分析：Charles
团队 Mock 体系：Mock 服务 + RouteInterceptor 互补

八、常见问题速查

问题	原因	解决
规则没生效	popup 顶部方法按钮是绿色	切到红色才拦截；路由规则同理需要点"添加"
HTTPS 请求拦截不到	URL 含 query string，正则没覆盖	确认关键字无误，用完整路径段匹配
规则误拦截其他接口	路由关键字写得太宽	缩窄匹配范围，加完整路径段（如 `/v1/users/create`）
浏览器更新后插件失效	Manifest V3 兼容问题	升级到 Chrome 最新稳定版
拦截了但页面卡住	请求被 block 没有响应	用重定向返回自定义响应（见第八节）
WebSocket 拦截不到	默认不拦截 WebSocket	在源码的 resourceTypes 里加 `websocket`
重启浏览器后规则丢失	storage.sync 同步失败	检查是否登录了 Chrome 账号；改用 storage.local
规则数量超限	单项目动态规则有上限	定期清理不用的旧规则

九、总结

RouteInterceptor 的核心思想一句话：

在请求出门前拦下它——让浏览器在请求真的下发之前就 block 掉，测试只留"看"和"改"，没有"清"。

核心实现回顾

浏览器原生拦截：基于 Chrome 的请求拦截能力，零依赖、零代理配置
两种拦截模式并存：按方法（GET/POST/PUT/DELETE/PATCH）+ 按路由关键字（部分匹配）
配置持久化：跨标签页、跨浏览器重启保留规则
规则全量刷新：每次更新避免旧规则残留，逻辑简单可靠

实践建议

第一步：装上插件，先用"POST 拦截 + 路由 /create"跑通流程
第二步：调试"创建/删除/更新"接口时，把对应路由加进规则，做只读调试
第三步：用"按方法拦截"做只读模式，演示/回归测试都不污染数据

把"抓参数不下发"做对后，调试效率立竿见影——告别"测试环境清数据"的苦活，专注于参数本身的正确性。

源码领取：关注公众号【`Code自习室`】，回复 `RouteInterceptor`

动手实验：按第五节步骤装上插件，给一个测试环境添加 POST 拦截 + /create 关键字规则，连续点 5 次"创建"按钮——观察 Network 面板里这 5 个请求的状态都是 blocked by extension，而数据库一条新记录都没有。这就是"出门前被拦下"的直观体验。

posted @ 2026-08-12 10:26 EXIORAN 阅读(14) 评论(0) 收藏举报

刷新页面返回顶部

EXIORAN