Chrome开发者工具实战：如何动态修改请求参数提升调试效率

1次阅读

没有评论

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

在 Web 开发中，前后端联调时经常需要修改请求参数来测试不同的场景。传统做法往往是：

修改前端代码中的请求参数
重新编译或刷新页面
发送请求查看结果

这个过程不仅耗时，而且效率低下。更糟糕的是，如果需要测试多种参数组合，就要反复重复这个过程。

虽然可以使用 Fiddler 或 Charles 这样的代理工具来拦截和修改请求，但这些工具也存在一些局限性：

需要额外安装软件
配置相对复杂
对 HTTPS 请求需要安装证书
无法与开发者工具深度集成

幸运的是，Chrome 开发者工具提供了多种方式来动态修改请求参数，无需修改代码或重新加载页面。下面介绍三种最实用的方法。

这是最简单直接的方法，适合快速测试：

打开 Chrome 开发者工具（F12）
切换到 Network 面板
找到目标请求，右键选择 ”Copy as fetch”
在 Console 面板粘贴并修改参数
直接执行修改后的 fetch 请求

示例代码：

// 原始请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {'Content-Type': 'application/json'},
  body: JSON.stringify({id: 1})
})

// 修改后的请求
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123' // 添加的 header
  },
  body: JSON.stringify({id: 2}) // 修改的参数
})

对于更复杂的场景，可以使用断点拦截请求：

打开 Sources 面板
在右侧的 XHR/Fetch Breakpoints 中添加断点
触发请求时会自动暂停
在 Console 中修改 request 对象
继续执行

这种方法特别适合需要修改请求头或处理 CSRF token 的场景。

对于需要频繁修改参数的场景，可以开发一个 Chrome 扩展：

创建 manifest.json 文件

{
  "manifest_version": 3,
  "name": "Request Modifier",
  "version": "1.0",
  "permissions": ["webRequest", "webRequestBlocking", "<all_urls>"],
  "background": {"service_worker": "background.js"}
}

编写 background.js 处理请求

chrome.webRequest.onBeforeSendHeaders.addListener(function(details) {
    // 修改请求头
    details.requestHeaders.push({
      name: "X-Modified-By",
      value: "ChromeExtension"
    });

    // 修改 POST 参数
    if(details.method === "POST" && details.requestBody) {// 这里可以添加参数修改逻辑}

    return {requestHeaders: details.requestHeaders};
  },
  {urls: ["<all_urls>"]},
  ["blocking", "requestHeaders"]
);

方法	启动耗时	内存占用	适用场景
Network 直接编辑	低	低	快速测试简单修改
XHR/Fetch 断点	中	中	需要调试复杂逻辑
Chrome 扩展	高	高	长期使用或团队共享

CORS 预检请求 (Preflight Request) 问题
确保修改后的请求头在服务器的 Access-Control-Allow-Headers 中
对于 OPTIONS 请求不要修改关键参数
HTTPS 证书错误
如果是本地开发，可以临时关闭 Chrome 的证书检查
chrome://flags/#allow-insecure-localhost 设置为 Enabled
CSRF Token 失效
确保修改请求时保留原有的 CSRF Token
或者从 Cookie 中动态获取最新的 Token

对于更复杂的场景，可以结合 Mock Service Worker(MSW)来实现：

安装 MSW
```
npm install msw --save-dev
```

创建请求处理

import {setupWorker, rest} from 'msw'

const worker = setupWorker(rest.post('/api/user', (req, res, ctx) => {
    // 根据请求参数返回不同响应
    if(req.body.id === '1') {return res(ctx.json({name: 'Admin'}))
    }
    return res(ctx.json({name: 'Guest'}))
  })
)

worker.start()

这种方法可以在不修改任何实际代码的情况下，模拟各种 API 响应。

通过 Chrome 开发者工具提供的这些功能，我们可以大幅提升 API 调试的效率。根据实际需求选择合适的方法：