在前端调试和开发中，我们经常需要拦截网络请求，并修改其请求体或响应内容，例如模拟接口、测试不同参数、伪造响应数据等。本文将介绍如何使用 Chrome 开发者工具（DevTools） 实现这些目标，无需借助任何浏览器插件。

---

🔍 应用场景概览

目标	示例	技术手段
替换请求体	修改 POST /api/send 的 JSON 数据	重写 fetch 或 XHR
替换响应数据	替换 /api/data 返回的 JSON 响应	重写 fetch
替换静态资源文件	替换 JS、JSON、CSS 等静态资源	使用 DevTools Overrides

---

✏️ 一、替换请求体内容（修改前端发出的数据）

当你需要修改页面发出的 JSON 请求，比如用户名、标志位、调试参数等，可以通过重写 fetch 或 XMLHttpRequest 来实现。

✅ 示例一：拦截并修改 fetch 请求体

(function() {
  const originalFetch = window.fetch;

  window.fetch = async (input, init = {}) => {
    const url = typeof input === 'string' ? input : input.url;

    if (url.includes('/api/send')) {
      console.log('[拦截 fetch] 原始请求体:', init.body);

      if (init.body && typeof init.body === 'string' && init.body.startsWith('{')) {
        const bodyObj = JSON.parse(init.body);
        bodyObj.username = '已被拦截修改';
        bodyObj.debug = true;
        init.body = JSON.stringify(bodyObj);
        console.log('[已替换] 请求体:', init.body);
      }
    }

    return originalFetch(input, init);
  };
})();

✅ 示例二：拦截并修改 XMLHttpRequest 请求体

(function() {
  const origOpen = XMLHttpRequest.prototype.open;
  const origSend = XMLHttpRequest.prototype.send;

  XMLHttpRequest.prototype.open = function(method, url) {
    this._url = url;
    return origOpen.apply(this, arguments);
  };

  XMLHttpRequest.prototype.send = function(body) {
    if (this._url.includes('/api/send') && typeof body === 'string' && body.startsWith('{')) {
      const bodyObj = JSON.parse(body);
      bodyObj.username = 'XHR拦截用户';
      bodyObj.debug = true;
      body = JSON.stringify(bodyObj);
      console.log('[XHR已替换] 请求体:', body);
    }

    return origSend.call(this, body);
  };
})();

💡 将上述代码粘贴至 DevTools → Sources → Snippets 中运行，即可实现拦截。

---

📦 二、替换响应数据（修改服务器返回内容）

通过拦截响应，可以模拟后端数据、绕过接口异常或控制返回结构。

✅ 示例：拦截并替换 fetch 响应体

(function() {
  const originalFetch = window.fetch;

  window.fetch = async (...args) => {
    const response = await originalFetch(...args);
    const url = args[0];

    if (url.includes('/api/data')) {
      const mockData = {
        msg: '这是模拟数据',
        data: [1, 2, 3]
      };

      return new Response(JSON.stringify(mockData), {
        status: 200,
        headers: { 'Content-Type': 'application/json' }
      });
    }

    return response;
  };
})();

---

📁 三、替换静态资源文件（如 JS、CSS、JSON）

对于页面加载的静态文件（如脚本、样式、配置 JSON），Chrome 提供了「Overrides」功能，可以让你将本地文件作为远程资源的替代。

🛠 操作步骤：

1. 打开 DevTools → Sources 面板 → 切换到 Overrides 标签
2. 首次使用会提示你选择一个本地目录（用于存储替代文件），点击授权
3. 勾选 Enable Local Overrides
4. 回到 Network 面板，右键点击你要替换的资源 → Save for overrides
5. 在本地编辑保存，刷新页面即可生效

---

🔧 四、进阶方案：使用插件 Requestly（可选）

虽然本文强调无插件方案，但在企业级场景下，你可能需要图形化、持久化的配置能力，可以考虑使用：

• 🔗 Requestly: 支持请求拦截、重定向、响应替换、JS 注入等
• 🔧 ModHeader: 请求头修改（适合配合后台服务调试）

---

✅ 总结对比

功能	实现方式	是否需要插件
替换请求体数据	重写 fetch / XHR	否
替换响应内容	重写 fetch 返回内容	否
替换静态资源	使用 DevTools Overrides	否
高级控制规则	使用 Requestly 插件	是

---

🧠 温馨提示

• 使用 fetch 或 XHR 重写的代码仅对当前页面有效，刷新后需重新注入；
• 如果你经常需要调试接口，建议将拦截逻辑封装为 Snippet 或书签；
• 使用插件需遵守隐私政策，不建议在处理敏感数据场景下使用第三方插件。

---

以上就是在 Chrome 中拦截并替换请求和响应内容的实用技巧，希望对你前端开发调试有所帮助。