场景是这样的。

你是一个后端开发，本地把服务启动好了，准备联调接口。

前端同事说：“页面已经接好了，你直接看。”

你在浏览器里打开测试环境的页面，正常操作触发了一个接口调用，然后看着 Chrome DevTools 的 Network 面板陷入了沉思。

这个请求参数也太多了。

URL 带了一串 query，请求头里有 token、content-type、还有几个自定义头，请求体是个嵌套了三层的 JSON。

你要在本地复现这个请求，怎么办？

常规操作：手动把这些参数一个个抄到 Swagger 或者 Postman 里。

先复制 URL → 粘贴 → 再切到 Headers 一个个填 → 然后切到 Body，对着 Network 面板里的原始请求把 JSON 手打一遍，或者复制过去再修格式 → token 过期了？又得去页面上重新拿。

等你把参数全部搬完，几分钟过去了。

而且这种操作，联调一天要重复好多次。

问题的根子在"搬运"

后端自己的项目已经启动好了，接口也写好了，参数什么的也都对。但你就是想在本地跑一下看看结果。问题出在复现请求这件事上。

用 Swagger 吧，你得手填参数。用 Postman 吧，也得粘来粘去。而且很多接口都是在页面上经过登录、鉴权、各种前置操作之后才能触发的，很难用一个 URL 独立复现。

但如果浏览器已经发出了这个请求，参数、请求头、请求体全都在，为什么不直接在浏览器里改个地址重发一次呢？

这个插件干的就是这件事：

拦截页面里的 XHR/Fetch 请求 → 保留完整的请求信息 → 你把地址前缀改成 localhost:8080 → 一键重发。

不需要 Swagger，不需要 Postman，不用填任何参数。

来看一个真实的联调流程

你的本地服务跑在 http://localhost:8080，测试环境地址是 https://test-api.company.com。

前端说已经对接好了，你打开测试环境的页面点了一个按钮，触发了某个 POST 接口。

以前：

1. 打开 DevTools 的 Network 面板
2. 找到那条 POST 请求，展开看详情
3. 复制 URL 到 Postman
4. 一个一个复制请求头（Host、Content-Type、Authorization……）
5. 找到请求体，复制，粘贴到 Postman
6. 发现 JSON 格式乱了，手动调整
7. 发送，token 过期了
8. 回页面重新操作一遍，拿到新 token
9. 再复制回来
10. 终于发出去了，这时候你已经不太确定刚才是想看什么了

现在：

1. 点一下浏览器工具栏的齿轮图标
2. 在请求列表里找到那条 POST，点一下展开
3. URL 前缀自动填上了你之前存好的 http://localhost:8080
4. 点"发送请求"

第 3 步甚至不需要你手动输入 —— 只要你之前存过一次 http://localhost:8080，插件会自动匹配。

参数、请求头、请求体，全都不需要手动填。它们是从真实请求里直接捕获的，原封不动。

还有什么场景能用

线上排查 bug：线上某个接口返回了异常数据，你在浏览器里打开线上页面复现，捕获请求后直接把地址切到本地，看看同样的参数在本地返回什么。如果能复现，说明是代码问题，不是环境问题。

调试带登录态的接口：很多接口依赖登录后的 token 或者 cookie。用这个插件直接从已经登录的页面上捕获请求，不需要额外处理鉴权。

对比不同环境的行为差异：同一个接口，测试环境和本地环境返回不一样？展开请求，换一下地址前缀发两次，两个响应都在同一个面板里，上下对比着看，一目了然。

怎么用

插件暂时没有上传Chrome Web Store，走开发者模式加载。

装好后浏览器工具栏会出现一个API的图标。去你要调试的页面正常操作触发接口请求，然后点API图标打开面板：

1. 在"常用地址"区域添加你的本地地址（比如 http://localhost:8080），添加一次永久保存
2. 请求列表里找到你要调试的请求，点一下展开
3. URL 被拆成了前缀 + 路径两部分，前缀自动匹配你存好的地址
4. 请求头和请求体都是自动回填的，你也可以直接编辑
5. 点"发送请求"，响应直接在面板里展示，JSON 会自动格式化
   

最多保留 100 条最近请求，常用地址可以存任意多个。所有数据以及所有的请求记录，都存在浏览器本地，不会上传。

代码和地址

项目仓库地址，有问题可以提 Issue，也欢迎 PR：

https://gitee.com/yanwuhc/api-swicth.git