怎么在谷歌浏览器中拦截并修改特定的Ajax接口请求数据？

前端调试时，最怕什么？后端接口还没写完，或者想测个404、500、空数组结果，却死活复现不了——总不能求着后端大哥给你造个异常场景吧。这时候，Ajax Interceptor 就是你的救星。它能精准拦截 HTTP 请求，把原始响应“偷梁换柱”成你想要的任何内容，且不依赖后端，Network 面板里还能保留真实数据做对比。下面直接上实操，从安装到进阶用法一条龙讲完。

安装并启用 Ajax Interceptor 扩展

先打开 Chrome 的扩展管理页面——地址栏敲 chrome://extensions/ 回车就进去了。右上角记得打开「开发者模式」开关，这一步别漏掉。然后把下载好的 ajax-interceptor 插件文件夹（里面得有 manifest.json 才算完整）直接拖进页面空白处，松开鼠标就装上了。装好后刷新一次页面，点一下工具栏上的 Ajax Interceptor 图标，在弹出的窗口中点击 Enable Interception 按钮，激活拦截功能。

添加规则：匹配 URL 并修改响应内容

点扩展图标 → 进主界面 → 左上角「+ Add Rule」按钮点一下。在 URL 输入框里填上你要拦截的目标接口完整路径，比如 https://api.example.com/user/profile。如果接口路径不固定，可以用通配符，比如 /api/v2/*/list 就能匹配所有类似地址。然后切换到「Response」标签页，选择「JSON」格式，在编辑框里直接输入你想返回的模拟数据，比如：

{"code":200,"data":{"id":123,"name":"测试用户","role":"admin"}}

保存后（点右下角「Save」），该 URL 的所有后续请求就被拦截了，前端 JavaScript 读到的就是你写的这个 JSON。有意思的是，Network 面板里仍然显示服务器返回的原始数据——两者互不干扰，方便你对比验证。

进阶操作：用 JavaScript 动态生成响应

如果觉得固定 JSON 太死板，想更灵活一点，那就换用 JavaScript 模式。在 Response 编辑区下拉选择「JavaScript」，然后直接写逻辑。

方法一：基础 JS 返回固定结构
比如生成一个包含5个文章的列表：

return { status: 200, data: Array.from({length: 5}, (_, i) => ({ id: i + 1, title: `文章${i + 1}` })) };

方法二：基于原始响应做条件改写
利用 arguments[0] 拿到原始响应对象，想过滤敏感字段？直接解构后删掉：

let { originalResponse } = arguments[0];
try {
  const json = JSON.parse(originalResponse);
  delete json.token;
  delete json.sessionId;
  return { ...json };
} catch(e) { return originalResponse; }

方法三：调用 Mock.js 生成随机列表
如果插件已内置 Mock.js，可以直接用 Mock.mock 生成动态数据，比如随机生成3到8个用户：

const data = Mock.mock({ 'list|3-8': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1 }] });
return { code: 200, data: data.list };

验证与关闭拦截

写完规则别忘验证。刷新目标页面，打开浏览器控制台（F12），在 Console 里执行 fetch('/api/example').then(r => r.json()).then(console.log)，看看输出是不是你设定的数据。然后切到 Network 面板，找到对应的请求，点「Preview」或「Response」标签页，显示的也是你伪造的数据，而不是服务器真实返回的。调试完毕后，务必回到 Ajax Interceptor 界面，点击顶部红色的「Disable Interception」按钮关闭全局拦截——否则它会一直拦截所有匹配请求，影响其他页面的正常工作。