前端调试时，最怕什么？后端接口还没写完，或者想测个 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"}}

• 保存规则：点右下角「Sa ve」完成保存。

保存后，该 URL 的所有后续请求就被拦截了。前端 Ja vaScript 读到的就是你写的这个 JSON。

Network 面板里仍然显示服务器返回的原始数据——两者互不干扰，方便你对比验证。

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

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

方法一：基础 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」按钮关闭全局拦截——否则它会一直拦截所有匹配请求，影响其他页面的正常工作。

《夸克》非常好用的免费AI浏览器

下载APP查看