不懂就问系列之——你不知道的HAR文件

背景

开发过程中，经常chrome开发者工具卡死无法查询网络请求（像图中），显示 “将HAR文件拖放到此处”。解决方案很粗暴，关闭开发者工具再使用F12

突然反应过来,HAR是什么东西？

什么是HAR文件

HAR（HTTP Archive format），是一种或 JSON 格式的存档格式文件，通用扩展名为 .har。Web 浏览器可以使用该格式导出有关其加载的网页的详细性能数据。

HAR文件使用场景

在开发过程中，有的场景不好复现，比如访问速度慢，请求失败等，由于设备限制，对于我们来说精确的收集数据以及定位问题有一定难度。
比如，作为开发我们可以很熟练的按下F12查看请求，但如果是作为技术支持，没有办法长时间占用对方（客户）的电脑进行问题排查。HAR则可以帮助我们收集所有的HTTP请求。

HAR文件相关操作

保存 HAR 文件

1. chrome操作
   1.1 在菜单中打开“开发人员工具”（“菜单”>“更多工具” >“开发人员工具”），您也可以在键盘上按 F12 （或 Fn-F12）。
   1.2打开“网络”标签页。
   1.3在“网络”标签页的左上角，找到一个圆形按钮。 确保该按钮是红色的。如果显示灰色，请点击一次以开始 录制。
   1.4开启“保留日志”**
   1.5要保存记录的内容，请在网格上右键点击，然后选择 **“将内容保存为 HAR”。选择保存位置，该位置会生成一个名为 www.baidu.com.har 的文件。
   
2. 打开 HAR 文件
   2.1 chrome 打开开发者工具，切换到“网络”标签页，将HAR文件托拽放入即可。
   2.2

注意事项

HAR 文件包含敏感数据！HAR 文件包含敏感数据！HAR 文件包含敏感数据！
录制过程中所下载网页中的内容。
您的 Cookie（任何有 HAR 文件的人都可以使用这些 Cookie 冒用您的帐号）。
录制过程中提交的所有信息： 个人详细信息、密码、信用卡号码等。
如有需要，可以先在文本编辑器中编辑 HAR 文件以及对敏感信息进行匿名处理。

HAR 文件包含的内容

• 请求和响应信息：包括请求头、响应头、请求体、响应体等。
• 时间戳和加载时间：每个请求的开始时间、结束时间、加载耗时等。 资源类型：如
  HTML、CSS、JavaScript、图片等。 HTTP 状态码：每个请求的返回状态码（如 200、404、502 等）

。

HAR 文件不包含的内容

• 本地缓存：浏览器缓存的资源（如图片、脚本等）不会被记录到 HAR 文件中。
• 完整的 Cookie 信息：虽然 HAR 文件会记录请求头中的 Cookie 字段，但不会包含浏览器本地存储的完整 Cookie 列表。
• 本地存储（LocalStorage 和SessionStorage）：这些存储在浏览器本地的数据不会被记录到 HAR 文件中。
• 浏览器扩展的内部数据：扩展程序的内部数据也不会被记录。