Chrome DevTools 怎样复制带请求头的网络请求
来源:17golang原创
时间:2026-10-18 11:32:19 317浏览 收藏
在 Chrome DevTools 的 Network 面板中,右键目标请求所在的 Name 行,选择 Copy > Copy as cURL,即可把请求转换为带请求参数的命令文本。只点 Copy URL 得到的是地址,不是包含请求头和请求体的完整调试材料。
官方帮助入口:https://developer.chrome.com/docs/devtools/network/。本文只处理你有权调试的页面,最终把单条请求保存为文本,不要求重发请求。图片均为 ImageGen 原创操作示意图,不是真实浏览器截图,也不表示已执行图中的请求。
1. 先捕获一次明确的测试请求
在桌面 Chrome 打开自己的测试页面,打开开发者工具后点击 Network。Windows、Linux 可先按 Ctrl+Shift+J,macOS 可先按 Command+Option+J,再从 Console 切换到 Network。确认左上角录制按钮处于启用状态,然后触发一次只读查询。
例如在你自己的练习页面查询“设计规范”,目标请求约定为 https://example.invalid/api/search?q=design。这是不可用于真实服务的虚构示例地址,不要访问它。实际操作使用自己环境中的地址。请求列表出现新行才继续;打开工具前发生的旧请求,不会自动补录。
如列表过多,可用过滤栏输入路径片段 api/search,但过滤只是缩小显示范围,仍要选对那一条。不要为了教学重新提交订单、付款或删除操作。刷新页面可能重新加载数据,应先确认测试环境允许。

2. 对照 Headers,确认复制的是哪条请求
点击目标行,打开详情中的 Headers,在 General 看 URL 和 Request Method,再看 Request Headers。不要把 Response Headers 当作要发出的请求头:前者描述客户端发送的字段,后者属于服务端返回的数据。
假设练习请求是 GET,查询词应在 URL 的查询参数中;若你处理的是有正文的请求,再切到 Payload 看提交内容。本篇不要求为了获得请求体而把 GET 改成 POST,也不要求手工添加任何身份字段。
继续前至少确定“地址、方法、所选行”是一致的。相同路径可能出现多次;选中的也可能是重定向链的一段或 OPTIONS 预检,不要仅凭 Name 相似就判断选对。如果面板提示 Provisional headers are shown,不能把暂列的头部视为完整的实际上网记录。

3. 从单条请求的 Copy 子菜单导出
回到该请求的 Name 单元格,右键,展开 Copy,选择 Copy as cURL。若当前界面细分为 bash、cmd 等目标格式,按以后实际使用的 shell 选择;菜单名称随版本和平台可能略有差异。Windows 的 cmd 转义与 bash 不相同,不能只改一处换行符就认为可以跨 shell 执行。
这里选的是单条请求,不是 Copy all as cURL 或带 all listed 的批量选项。也不要点 Copy response:那份结果是响应正文。复制操作的目标是剪贴板文本;本轮到这里不需要点击 Replay XHR,也不需要使用 Edit and resend as fetch。
| 所需材料 | 选择 | 得到的内容 |
|---|---|---|
| 仅记录接口地址 | Copy URL | URL 文本 |
| 保留单次请求参数 | Copy as cURL | 可供检查的请求命令 |
| 记录返回数据 | Copy response | 响应正文,不等同于请求 |

4. 先粘贴为文本,再保存需要的副本
把剪贴板内容粘贴到本地纯文本草稿,先不要放进终端、Console 或会自动执行导入内容的工具。对照第2步所选行,辨认命令中的 URL、方法、请求头以及可能的数据参数。cURL 中 -H 或 --header 用来提供请求头;不同导出结果可能使用不同参数,不要要求每个头都必须长成相同形式。
下面是人工精简的 bash 格式教学文本,不是 DevTools 的逐字导出,不含真实凭据,也没有执行过:
# 仅展示 URL 与请求头的对应关系;示例域名不提供真实接口 curl 'https://example.invalid/api/search?q=design' \ -H 'Accept: application/json'
这个命令没有指定其他方法或上传数据时使用 GET。真实复制结果若包含数据参数,要保留它们与方法的组合关系,不能为了让文本变短而随意删掉请求体。复制文本并不保证之后重放一定成功:会话、临时签名和业务状态都可能发生变化;浏览器上下文也不等同于命令行环境。
保存前检查 URL 查询参数、请求体、Cookie、Authorization 和其他自定义身份头。不要把真实会话值贴进公开工单、聊天或代码仓库。用于交流的副本可替换为清楚标注的占位说明,并明确它已经不可直接复现;真正需要受限保存的原件只留在获授权的位置。不要因为导出菜单另有 sanitized HAR 选项,就推断 cURL 剪贴板文本也已自动脱敏。

最后将这份材料命名为“查询请求-脱敏说明”,记录来源页面、复制时间及目标 shell。文件扩展名用 .txt,避免把用于交流的内容误作脚本运行。若结果只有一行地址,重新选择 Copy as cURL;若包含多条 curl 命令,检查是否误用了批量菜单。完成标准是得到可辨认、经过必要脱敏的单次请求文本,而不是向服务端多发一次请求。
相关官方资料
Network 的复制与请求详情功能:https://developer.chrome.com/docs/devtools/network/reference/
cURL 参数含义:https://curl.se/docs/manpage.html
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
305 收藏
-
495 收藏
-
379 收藏
-
132 收藏
-
224 收藏
-
276 收藏
-
143 收藏
-
151 收藏
-
192 收藏
-
126 收藏
-
282 收藏
-
363 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习