#码力全开·技术π对#如何一键导出所有 HTTP 请求？

核心方法：使用 Chrome 开发者工具的 “Export HAR” 功能

HAR 文件是一个 JSON 格式的存档文件，它记录了浏览器与网站交互过程中发生的所有网络请求和响应的详细信息，包括头信息、时间线、Cookie、内容等。这正是复现瀑布图所需要的全部数据。

操作步骤：

1. 打开开发者工具：

• 在 Chrome 中打开你需要分析的网页。
• 按下​​F12​​ 键 或​​Ctrl+Shift+I​​ (Windows/Linux) /​​Cmd+Option+I​​ (Mac) 打开开发者工具。

2. 切换到 Network (网络) 面板。
3. 开始记录：

• 确保顶部的红色录制按钮是开启状态（默认就是开启的）。如果它是灰色的，点击一下它变为红色，表示正在记录。

4. 重现操作/捕获请求：

• 如果页面已经加载完毕，你可以刷新页面(​​F5​​ 或​​Ctrl+R​​ /​​Cmd+R​​) 来捕获所有初始请求。
• 如果你需要捕获的是页面上的某个交互（如点击按钮、提交表单），那么现在就去进行这些操作。所有的网络活动都会被记录下来。

5. 停止记录（可选）：

• 对于一次性页面加载，捕获完成后可以点击红色的录制按钮使其变为灰色，以防止后续无关请求干扰。对于交互场景，通常不需要停止。

6. 一键导出 HAR 文件：

• 在 Network 面板的网络请求列表区域的任意位置右键单击。
• 在右键菜单中，选择Save all as HAR with content。
• 关键区别：

• ​​Copy all as HAR​​：仅将 HAR 数据复制到剪贴板，不保存文件。
• ​​Save all as HAR with content​​：强烈推荐使用这个选项！它会将请求的响应体内容也一并保存到 HAR 文件中。这对于复现和深度分析至关重要。如果只导出不带内容的 HAR，同事将无法看到具体的响应数据，某些分析会受限。

7. 保存文件：

• 选择一个位置保存生成的​​.har​​ 文件。

在同事电脑上完整复现瀑布图

现在，你的同事拿到了这个 ​​.har​​ 文件，他可以通过以下几种方式来“重放”并查看和你一模一样的瀑布图。

#### 方法一：在 Chrome 开发者工具中直接导入和查看（最常用）

这是最简单、最直接的方法，完美复现瀑布图。

1. 同事在他的 Chrome 浏览器中打开一个新标签页。
2. 打开开发者工具 (​​F12​​) 并进入Network (网络) 面板。
3. 确保网络记录是开启状态（红色按钮）。
4. 在 Network 面板的请求列表区域右键单击。
5. 选择Import HAR file...。
6. 选择你发送给他的​​.har​​ 文件。

效果：瞬间，所有被记录的请求就会像魔术一样出现在 Network 面板中，包括完整的瀑布图、请求头、响应头、响应内容等。同事可以点击任何一个请求，查看其详细信息，并利用 Performance (性能) 面板 等其他工具进行联合分析。

#### 方法二：使用在线 HAR 分析工具

如果觉得传文件麻烦，或者想快速分享给多人，可以使用在线工具。这些工具提供了更友好的可视化界面。

• HAR Analyzer：​​https://toolbox.googleapps.com/apps/har_analyzer/​​
• HTTP Archive Viewer：​​https://www.softwareishard.com/har/viewer/​​

操作步骤：

1. 你或你的同事将​​.har​​ 文件拖拽或上传到这些网站。
2. 网站会自动解析并展示出瀑布图和各种统计信息。

优点：无需安装，分享链接即可。 缺点：可能会涉及敏感数据，请勿将包含机密信息的 HAR 文件上传到公共网站。

### 最佳实践与注意事项

1. 清除缓存（重要！）：为了确保你捕获的请求是完整的，而不是来自浏览器缓存的，在开始记录前，最好在 Network 面板上勾选 Disable cache 选项。
2. 捕获完整的用户流程：如果你要分析的是一个多步骤的操作（如登录 -> 搜索 -> 下单），请确保从流程开始前就启动记录，直到流程完全结束再导出 HAR。
3. 文件大小：如果页面非常复杂，导出的 HAR 文件可能会很大（几十MB甚至上百MB），因为它包含了图片、JS、CSS 等所有资源的响应内容。通过邮件或即时通讯工具发送时请注意。
4. 敏感信息：HAR 文件可能包含 Cookie、Authorization 头、个人身份信息等敏感数据。在分享前，请确认可以泄露这些信息，或者使用一些工具对 HAR 文件进行脱敏处理。

### 总结

按照以上流程，你就可以轻松地将任何网页的网络活动“快照”下来，并让任何一位同事在他的电脑上完整地复现和分析。这是现代Web开发中团队协作调试的利器。