Chrome DevTools 实战：如何动态修改请求参数提升调试效率

1次阅读

没有评论

共计 2515 个字符，预计需要花费 7 分钟才能阅读完成。

在前端开发中，接口调试是一个频繁且耗时的任务。我们经常遇到以下场景：

需要测试不同参数组合对接口返回结果的影响
模拟后端返回异常数据（如空列表、错误状态码）来验证前端容错能力
快速切换测试环境和生产环境的接口地址
临时修改某些敏感参数（如用户 ID）进行特定测试

传统做法是直接修改代码并刷新页面，这种方式效率低下且容易引入错误。虽然 Postman 等工具可以模拟请求，但无法真实反映前端代码在浏览器中的运行环境。

常见的请求参数修改方式有几种，各有利弊：

直接修改源代码
优点：简单直接
缺点：需要频繁刷新页面，修改无法持久化，容易提交调试代码到仓库
使用 Postman 等 API 测试工具
优点：功能强大，可保存请求历史
缺点：脱离真实浏览器环境，无法测试前端代码的实际表现
浏览器插件（如 ModHeader）
优点：可修改请求头
缺点：功能有限，无法修改请求体和 URL 参数
Chrome DevTools Overrides
优点：直接在真实环境中修改请求，修改可持久化，无需刷新页面
缺点：需要一定学习成本

打开 Chrome DevTools（F12）
切换到 ”Sources” 面板
在左侧导航栏找到并点击 ”Overrides”
选择本地文件夹用于存储修改规则（Chrome 需要文件系统写入权限）

在 Overrides 文件夹中新建 JavaScript 文件（如request-override.js），添加以下代码：

// 拦截所有 fetch 请求
const originalFetch = window.fetch;
window.fetch = async function(...args) {// args[0]是请求 URL，args[1]是配置对象
  let [url, options] = args;

  // 示例 1：修改特定 API 的请求参数
  if (url.includes('/api/user')) {
    // 创建新 URL 对象便于修改参数
    const newUrl = new URL(url, location.origin);

    // 添加或修改查询参数
    newUrl.searchParams.set('debug', 'true');

    // 返回修改后的请求
    return originalFetch(newUrl.toString(), options);
  }

  // 示例 2：修改 POST 请求体
  if (url.includes('/api/submit') && options?.method === 'POST') {const originalBody = JSON.parse(options.body);

    // 修改请求体内容
    const newBody = {
      ...originalBody,
      testMode: true,
      timestamp: Date.now()};

    // 更新请求配置
    const newOptions = {
      ...options,
      body: JSON.stringify(newBody)
    };

    return originalFetch(url, newOptions);
  }

  // 其他请求不处理
  return originalFetch(...args);
};

// 拦截 XMLHttpRequest
const originalXHROpen = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function(method, url) {
  // 修改 XHR 请求 URL
  if (url.includes('/api/data')) {const newUrl = new URL(url, location.origin);
    newUrl.searchParams.set('cacheBuster', Math.random());

    // 使用修改后的 URL 调用原始方法
    return originalXHROpen.apply(this, [method, newUrl.toString(), ...arguments]);
  }

  return originalXHROpen.apply(this, arguments);
};