Chrome DevTools 保存网络请求为 HAR 的操作步骤
来源:17golang原创
时间:2026-10-17 10:53:03 140浏览 收藏
Chrome DevTools 保存网络请求为 HAR,需要先打开 Network 记录请求,再用 Export HAR (sanitized)... 导出。若问题跨页面跳转,复现前勾选 Preserve log;它保留导航前的请求记录,但不会替你把日志写成磁盘文件。
官方地址:https://developer.chrome.com/docs/devtools/
设想一个常见调试任务:测试站点从列表跳到详情后出现异常,需要把这一次操作的网络记录交给同事。只在自己有权调试的环境操作,优先使用测试账号和虚构业务数据。下列界面均为原创操作示意图,不是浏览器截图或实际抓包结果;不同语言和窗口宽度下位置可能略有变化。
步骤1:打开 Network,准备一份干净记录
在 Chrome 右上角菜单中进入 More tools → Developer tools(更多工具 → 开发者工具),选择 Network(网络)标签。确认录制圆点处于红色录制状态,再点击 Clear 清空之前与本次问题无关的记录。清空会移除面板里的已有请求,重要记录应先另行保存。

继续前,应能看到 Network 面板和请求表格。要包含页面初始加载请求,应先开面板再刷新页面,而不是发生问题之后才打开。暂时不要额外修改缓存或网络限速条件,以免把另一种环境变化带入本次记录。
步骤2:勾选 Preserve log,再复现跨页操作
在 Network 顶部工具栏勾选 Preserve log(保留日志),然后回到测试页面,按约定路线执行一次列表到详情的跳转。问题出现后停止继续浏览;需要固定采集范围时,点击录制圆点停止记录。不要在同一份记录里混入邮件、后台管理或其他无关账号操作。

继续前,列表中应保留跳转前后的相关请求。若没有记录,检查录制是否开启、是否在正确标签页操作,以及 Filter 或资源类型按钮是否隐藏了目标请求。只想保留这次问题的完整列表时,将文本过滤条件清空,并选择 All;只导出特定范围时,则先确认过滤后的范围确实符合交付目标。
Preserve log 解决的是导航时清空列表的问题,不等于永久归档。也不要为了“多抓一点”持续记录真实业务活动;越短、越明确的复现范围,通常越容易讨论问题。
步骤3:导出 sanitized HAR,确认保存的文件
回到 Network 顶部操作栏,点击 Export HAR (sanitized)...,在保存对话框中指定文件名,例如 detail-request.har,选择受控的本地目录并保存。也可右键请求行,在 Copy 子菜单中选择 Save all [listed] as HAR (sanitized)。不要把 Copy as cURL 当成 HAR 导出。

保存后,应在自己选择的目录看到对应的 .har 文件。建议在交付备注里写清“复现的是哪一次操作、是否启用保留日志、是否使用了过滤条件”,不要把文件名称当成问题已经定位的证明。录制范围不对时重新采集,不要手工拼接两个不相干时段冒充一次连续记录。
Chrome 默认脱敏导出会排除 Cookie、Set-Cookie、Authorization 等敏感请求头;这不等于整个 HAR 已经没有隐私。URL 查询参数、请求体和响应内容仍可能包含业务资料,分享前仍需按团队规则处理,只通过授权渠道传递。普通排障不应为了省事启用带敏感数据的导出选项。
| 操作 | 作用 | 不能代替什么 |
|---|---|---|
| Preserve log | 跨导航保留记录 | 保存磁盘文件 |
| Clear | 清理当前列表 | 保存重要旧记录 |
| Export HAR (sanitized) | 导出默认脱敏HAR | 完整隐私审查 |
| 停止录制 | 固定采集结束位置 | 自动导出 |
为什么跳转后前一页请求没有了?先检查复现之前是否勾选 Preserve log,事后打开不能补回已经丢失的记录。
为什么导出文件缺少目标请求?确认它是否真的被记录,再检查过滤条件;HAR不能补回打开工具以前没有采集到的请求。
脱敏HAR能直接发公开论坛吗?不建议。默认脱敏只针对部分敏感信息,并不构成公开授权;先按组织的数据处理要求确认内容和接收人。
入口名称、保留日志和导出格式参见 Chrome DevTools 官方 Network 参考。完成这项任务的结果是一份范围明确、按权限管理的本地 HAR,不是自动修复网站,也不是证明服务端根因。
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
234 收藏
-
222 收藏
-
286 收藏
-
373 收藏
-
118 收藏
-
412 收藏
-
264 收藏
-
309 收藏
-
180 收藏
-
292 收藏
-
302 收藏
-
259 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习