如何从网络选项卡复制 API 请求

当你在浏览器中调试 API 请求并发现 400 或 500 错误时,最快的调查方法是直接从网络选项卡复制该请求,并在专用的 API 客户端中重放它。无需设置代理。以下是在 Chrome、Edge 和 Firefox 中高效完成此操作的方法。

标准工作流程

打开开发者工具(按 F12 或 Mac 上的 Cmd+Option+I),导航到 Network(网络)选项卡,然后触发发起请求的操作。一旦请求出现在列表中,右键单击它以访问复制选项。

在复制之前,有两个设置值得检查:

• 按 Fetch/XHR 筛选 — 点击”Fetch/XHR”筛选按钮以隐藏静态资源,仅关注 API 调用。这使得定位正确的请求变得更加容易。
• Preserve log(保留日志) — 如果请求发生在页面导航或重定向期间,请启用此选项。否则,网络选项卡会在导航时清空,你将丢失该条目。

要快速找到特定端点,使用 Search(搜索)面板(在网络选项卡中按 Ctrl+F / Cmd+F),并通过 URL 片段或端点名称进行搜索。

Copy as cURL 与 Copy as Fetch 的对比

右键单击请求会提供几个复制选项。最有用的两个是 Copy as cURL(复制为 cURL)和 Copy as fetch(复制为 fetch)。

Copy as cURL(复制为 cURL)

这是 Chrome、Edge 和 Firefox 中支持最广泛的选项。它生成一个 shell 命令,你可以直接粘贴到终端中,或导入到 Postman 或 Insomnia 等工具中。

curl 'https://api.example.com/users' \
  -H 'Authorization: Bearer eyJhbGci...' \
  -H 'Content-Type: application/json' \
  --data-raw '{"page":1}'

最适合: 终端测试、与后端团队成员共享、导入到 API 客户端,或提交包含可重现请求的错误报告。

Copy as Fetch(复制为 Fetch)

这会输出一个 JavaScript fetch() 调用,你可以直接粘贴到浏览器控制台或 Node.js 脚本中。

fetch("https://api.example.com/users", {
  method: "POST",
  headers: {
    "Authorization": "Bearer eyJhbGci...",
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ page: 1 })
});

最适合: 快速控制台测试、在 JavaScript 环境中重现问题,或在代码库中构建 fetch 调用的脚手架。

Chrome 和 Edge 还提供 Copy as Node.js fetch(复制为 Node.js fetch)和 Copy as PowerShell(复制为 PowerShell),用于特定环境的工作流程。

复制的请求无法成功重放的情况

复制请求会捕获其在那一刻的确切状态,包括会话 cookie、身份验证令牌和 CSRF 头。稍后重放它可能因以下几个原因而失败:

• 令牌或会话过期 — JWT 和会话 cookie 具有生存时间(TTL)。一小时前复制的请求可能会返回 401。
• 基于 Cookie 的身份验证 — 某些身份验证流程依赖于 HttpOnly cookie,这些 cookie 在复制的输出中不完全可见。
• 请求顺序 — 某些 API 需要先执行前置请求(例如,获取 CSRF 令牌),然后目标调用才能成功。

如果重放的请求意外失败,请首先检查身份验证头。

导出多个请求:HAR 文件

要一次捕获和导出多个请求,请使用网络选项卡中的 HAR 导出选项。在当前的 Chrome 和 Edge 版本中,HAR 导出默认进行脱敏处理,可能会排除敏感头信息(如 cookie 和授权数据),除非你明确启用导出敏感数据。生成的 .har 文件(JSON 格式)可以导入到 Postman 或 Insomnia 等工具中,或使用 jq 等工具进行处理,以批量提取 URL 和负载。

关于安全性的说明

复制的请求通常包含敏感数据:身份验证令牌、会话 cookie、API 密钥和请求体。在与同事共享 cURL 命令或 HAR 文件或在错误报告中使用之前,请进行脱敏处理——将真实令牌替换为占位符(如 <TOKEN>),并从负载中删除任何个人数据。

结论

从网络选项卡复制 API 请求是前端开发者工具包中最实用的调试技巧之一。当你需要可移植性和工具兼容性时,使用 Copy as cURL。当你在 JavaScript 环境中工作时,使用 Copy as fetch。无论哪种方式,你都能在几秒钟内获得一个可重现、可检查的请求。

常见问题

如果页面已经导航离开,我还能从网络选项卡复制请求吗?

可以,但前提是你在导航发生之前启用了 Preserve log(保留日志)。否则,网络选项卡会在每次页面加载或重定向时清除所有条目。养成在重现涉及重定向或整页导航的问题之前启用 Preserve log 的习惯。

为什么我复制的 cURL 命令在终端中运行时返回 401?

最可能的原因是身份验证令牌或会话 cookie 已过期。复制的请求捕获的是那一刻存在的凭据。如果 JWT 或会话此后已过期,服务器将拒绝该请求。请及时复制并重放请求,或在重试之前刷新你的令牌。

开发者工具中 Copy as cURL 和 Copy as fetch 有什么区别?

Copy as cURL 生成适用于终端和 API 客户端(如 Postman 或 Insomnia)的 shell 命令。Copy as fetch 生成可以在浏览器控制台或 Node.js 脚本中运行的 JavaScript fetch 调用。选择 cURL 以实现跨工具和团队的可移植性,选择 fetch 用于基于 JavaScript 的调试。

HAR 文件可以安全地与团队成员共享或附加到错误报告中吗?

HAR 文件捕获完整的请求和响应数据,包括身份验证令牌、cookie 和请求体。如果在未经审查的情况下共享,它们可能会暴露敏感信息。在将 HAR 文件附加到任何报告或消息之前,务必检查文件内容并删除凭据、API 密钥和个人数据。