Chrome修改请求参数实战指南：从DevTools到脚本自动化

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

背景痛点

在日常开发调试中，我们经常需要修改请求参数来测试不同的场景。比如：

• 测试不同查询条件对接口返回结果的影响
• 模拟各种错误情况（如参数缺失、格式错误等）
• 测试边界值和异常值
• 调试需要特定参数的接口

传统方式是在代码中硬编码参数，然后反复修改和重新加载页面，这种方式效率低下且容易出错。

技术方案对比

1. DevTools 手动修改

最基础的方式是使用 Chrome 开发者工具的 Network 面板：

1. 打开 DevTools（F12）
2. 切换到 Network 选项卡
3. 找到目标请求
4. 右键选择 ”Copy as fetch”
5. 在 Console 中粘贴并修改参数
6. 执行修改后的 fetch 请求

优点：无需额外工具，适合快速测试
缺点：每次都需要手动操作，无法持久化

2. Chrome 扩展

ModHeader 等扩展可以修改请求头，但对请求体的支持有限。

适用场景：
– 需要修改请求头的简单场景
– 跨页面保持某些固定参数

3. 编程化方案

Puppeteer/Playwright 等工具可以实现完全自动化的请求修改：

• 适合自动化测试场景
• 可以集成到 CI/CD 流程
• 支持复杂的参数生成逻辑

核心实现

Request Overrides 功能配置

1. 打开 DevTools（F12 或 Ctrl+Shift+I）
2. 转到 Sources 面板
3. 在左侧找到 ”Overrides” 选项卡
4. 选择本地文件夹用于保存修改
5. 启用 ”Enable Local Overrides”
6. 在 Network 面板找到目标请求
7. 右键选择 ”Save for overrides”
8. 在 Sources 面板编辑保存的请求

Local Overrides 目录结构

建议按以下结构组织：

overrides/
│── api/
│   ├── user.json
│   └── product.json
└── scripts/
    ├── modify-headers.js
    └── params-generator.js

Puppeteer 脚本示例

const puppeteer = require('puppeteer');

(async () => {const browser = await puppeteer.launch();
  const page = await browser.newPage();

  // 启用请求拦截
  await page.setRequestInterception(true);

  // 监听请求
  page.on('request', interceptedRequest => {
    // 只修改特定 API 请求
    if (interceptedRequest.url().includes('/api/data')) {
      // 克隆请求并修改参数
      const newParams = {...interceptedRequest.postData() ? JSON.parse(interceptedRequest.postData()) : {},
        testMode: true,
        debug: 1
      };

      // 继续请求
      interceptedRequest.continue({postData: JSON.stringify(newParams)
      });
    } else {interceptedRequest.continue();
    }
  });

  // 导航到目标页面
  await page.goto('https://example.com');

  await browser.close();})();

代码规范

async/await 使用

async function modifyRequest(page) {
  try {await page.setRequestInterception(true);
    // 其他逻辑...
  } catch (error) {console.error('请求修改失败:', error);
  }
}

JSDoc 类型标注

/**
 * 修改请求参数
 * @param {puppeteer.Page} page - Puppeteer 页面实例
 * @param {Object} params - 要添加 / 修改的参数
 * @returns {Promise<void>}
 */
async function addParams(page, params) {// 实现...}

生产级考量

跨域请求处理

• 开发环境配置 CORS
• 生产环境使用代理服务器
• 必要时修改请求头：

interceptedRequest.continue({
  headers: {...interceptedRequest.headers(),
    'Access-Control-Allow-Origin': '*'
  }
});

缓存影响

修改参数可能导致缓存失效，解决方案：

1. 添加随机参数（如 _t=Date.now()）
2. 在服务端设置合适的缓存头
3. 在 Puppeteer 中禁用缓存：

const page = await browser.newPage();
await page.setCacheEnabled(false);

避坑指南

避免覆盖原生请求对象

修改请求时应该：

1. 始终克隆原始请求
2. 保留必要的头信息
3. 不要直接修改原始请求对象

HTTPS 证书错误

在 Puppeteer 启动时添加参数：

const browser = await puppeteer.launch({
  ignoreHTTPSErrors: true,
  args: ['--ignore-certificate-errors']
});

性能节流控制

对于高频请求：

1. 添加延迟
2. 限制并发
3. 使用队列控制请求速率

思考题

假设你需要修改的请求参数是加密的，如何在不破坏加密逻辑的情况下实现参数修改？

提示：可以考虑以下方案：
1. 使用 CryptoAPI 在修改后重新加密
2. 在代理层解密 - 修改 - 再加密
3. 与服务端约定调试模式下的特殊加密规则

欢迎在评论区分享你的解决方案！