在日常测试开发中抓取接口参数是高频操作——但很多时候我们只想拿到参数并不希望请求真的下发。这篇文章讲清楚为什么要拦截、传统方案的痛点以及如何用 Chrome 插件RouteInterceptor一键解决。一、痛点抓参数 ≠ 真发请求测试同学和前端开发同学应该都遇到过这样的场景场景 1调试创建资源接口测试创建云主机接口时想看前端到底下发了哪些参数。习惯动作F12 → Network → 点创建 → 看请求详情副作用请求真的下发云主机真的被创建后果测试环境堆了一堆测试云主机要手动清理忘了清理还会污染后续测试数据场景 2调试删除接口更狠的是删除接口。前端按钮一点云主机真的被删——可能删的是别人的、可能删的是生产接口配错、可能触发关联资源级联删除。场景 3前端联调只验证字段格式参数格式对不对、字段名是不是后端要的、必填字段是否齐全——这些不需要后端真的处理前端拿到参数就能验证。但浏览器一旦发请求后端就开始走业务逻辑了。场景 4复现 Bug 不污染数据复现提交表单参数错误的 bug需要多次尝试。每次都真实提交数据库里就多一堆脏数据。核心需求在浏览器层拦截请求不出浏览器就拿到参数——既不污染环境也无需任何额外配置。二、RouteInterceptor 是什么RouteInterceptor是一个 Chrome 浏览器插件专门用于拦截特定路由的请求。在进行 API 调试时可以避免不必要的请求下发导致的数据变动提高效率。核心能力请求拦截拦截指定 API 路由或指定请求方式防止实际请求被发送可自定义路由允许用户在插件界面输入需要拦截的请求路径临时启用/禁用用户可以快速启用或禁用请求拦截功能UI 界面提供简单的用户界面零上手门槛三、源码获取RouteInterceptor 的完整源码后台脚本、弹窗 UI、manifest 配置、图标资源已整理好。由于浏览器插件源码在多数技术社区审核较严这里统一放到WХ公众Н后台源码包内容RouteInterceptor/ ├── manifest.json # MV3 配置权限、入口、图标 ├── background.js # 后台逻辑declarativeNetRequest 规则同步 ├── popup.html # 弹窗 UI方法按钮 路由输入 规则列表 ├── popup.js # 弹窗交互chrom.storage 持久化 规则管理 ├── imgs/ # 图标 使用截图 └── README.md # 使用说明领取方式两步搞定WХ公众Н【Code自习室】后台回复关键词RouteInterceptor后台会把下载链接自动推送给你永久有效后续有功能更新也会同步推送。四、两种拦截模式详解RouteInterceptor 实质上是两种拦截模式并存模式 1按方法拦截适合调试只读场景——把所有写操作拦下但放行读操作。例如调试创建资源相关接口把POSTPUTDELETEPATCH都打开红色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 服务对比维度RouteInterceptorCharles / FiddlerMock 服务安装成本Chrome 插件一键装装 App 配代理 信任证书起本地服务工作层级浏览器内核系统代理网络层HTTPS 抓包原生支持需配证书需配证书拦截粒度URL 关键字 MethodURL / 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跑通流程第二步调试创建/删除/更新接口时把对应路由加进规则做只读调试第三步用按方法拦截做只读模式演示/回归测试都不污染数据把抓参数不下发做对后调试效率立竿见影——告别测试环境清数据的苦活专注于参数本身的正确性。动手实验按第五节步骤装上插件给一个测试环境添加POST拦截 /create关键字规则连续点 5 次创建按钮——观察 Network 面板里这 5 个请求的状态都是blocked by extension而数据库一条新记录都没有。这就是出门前被拦下的直观体验。