怎么在浏览器中拦截接口更改成想要的测试数据?

1,640 阅读1分钟

通过谷歌浏览器修改接口返回数据,无需依赖抓包工具或修改服务器代码!(本地覆盖)

  1. 打开开发者工具
  • 右键点击页面 → 选择“检查”(Inspect),或使用快捷键 F12 / Ctrl+Shift+I(Windows)/ Cmd+Opt+I(Mac)。

image.png

  1. 启用本地覆盖功能
  • 进入 Sources(源代码) 面板 → 找到 Overrides 选项卡。

image.png

  • 点击 Enable Local Overrides(启用本地覆盖)→ 选择一个本地文件夹(用于存储覆盖文件),并授予浏览器访问权限。 image.png

image.png 3. 替换接口内容

  • 进入 Network(网络) 面板 → 找到需要替换的接口请求(如XHR或Fetch请求)。
  • 右键点击该请求 → 选择 Save for overrides(保存为覆盖)或 Override content(覆盖内容)。
  • Chrome会自动将接口返回内容保存到之前选择的本地文件夹中。

image.png

  1. 修改覆盖文件
  • Sources 面板的 Overrides 选项卡中,找到对应的覆盖文件(如JSON、JS、HTML等)。
  • 直接编辑文件内容(例如修改接口返回的JSON数据),保存后无需刷新页面,后续请求会自动使用覆盖后的内容。

image.png

  1. 验证替换效果
  • 重新发起请求(如刷新页面或手动触发接口调用),观察接口返回内容是否已被替换。
  • 覆盖的文件会在 Sources 面板中显示紫色标识,网络请求也会显示紫色圆点图标。
  1. 禁用或清理覆盖
  • 完成测试后,可取消勾选 Enable Local Overrides 或直接删除覆盖文件。
  • 覆盖文件仅保存在本地,不会影响服务器代码。