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

Apr 29, 2026 · 2 min read

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

核心要点

使用 Copy as cURL(复制为 cURL)进行终端测试、导入到 Postman 或 Insomnia 等 API 客户端,以及与团队成员共享可重现的请求。
当你想在 JavaScript 环境中直接重放或构建请求时,使用 Copy as fetch(复制为 fetch),例如在浏览器控制台或 Node.js 脚本中。
在捕获请求之前,按 Fetch/XHR 筛选并启用 Preserve log(保留日志),以避免在导航期间丢失条目。
在共享复制的请求之前务必进行脱敏处理——它们通常包含身份验证令牌、会话 cookie 和 API 密钥。

标准工作流程

打开开发者工具(按 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 的习惯。

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

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

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

Gain control over your UX

See how users are using your site as if you were sitting next to them, learn and iterate faster with OpenReplay. — the open-source session replay tool for developers. Self-host it in minutes, and have complete control over your customer data. Check our GitHub repo and join the thousands of developers in our community.