如何从 Google Chrome、Firefox 创建 HAR 文件并对其进行分析?

HAR 文件通常用于解决网络或性能问题,包括在网站上执行特定任务时页面加载时间不佳和超时。

任何公司或网站的支持团队都使用此 HAR 文件来识别和解决性能问题,例如加载时间较长或较慢、页面呈现问题以及可能由于这些问题而出现的错误代码。

什么是一 .har 文件?

HTTP 存档格式,也称为 HAR 文件,是一种 JSON 格式的存档文件,其中包含 Web 浏览器记录的您最近的网络活动。 它跟踪所有交互,例如 Web 浏览器和网站之间的 Web 请求和响应。

HAR 文件记录了浏览器加载的每个资源,以及加载每个资源所花费的时间。 这些文件包含 HTTP 客户端-服务器连接的纯文本日志。

.har 是这些存档文件的扩展名。

为什么要生成HAR文件?

当用户提出请求以解决问题时,公司或业务支持团队可能会要求对 HAR 文件进行分析。

HAR 文件提供有关有助于调试的 HTTP 客户端-服务器请求和响应的广泛信息,例如浏览器设置和 cookie、获取响应数据所花费的时间、在网站上加载特定图片所花费的时间,建立服务器连接所花费的时间,以及发送请求和接收响应所花费的时间。

过程概述

  • 首先转到您遇到问题的网页并开始记录所有 Web 请求和交互。
  • 通过重复这些步骤来重现问题。
  • 完成捕获并保存 HAR 文件。
  • 自行分析 HAR 文件或将文件发送给支持团队以解决性能和页面呈现问题。

如何在不同的浏览器中生成 HAR 文件?

生成用于捕获 HTTP 会话的 HAR 文件因浏览器而异。

铬合金

所有浏览器的开发者工具中的网络选项卡都可以用来记录一个 HTTP 会话。

  • 在 Chrome 中,转到您遇到问题的页面。
  • 开发人员工具可以通过菜单访问(菜单 > 更多工具 > 开发人员工具)。 从新打开的面板中选择网络选项卡。
  • 在网络选项卡上,确保左上角的圆形按钮为红色。 如果它是灰色的,双击它开始记录交互。
  • 启用保留日志以记录所有 Web 请求和响应。
  • 要导出 HAR 文件,请单击网络选项卡本身中的向下箭头按钮。
  • 将 HAR 文件保存到您的计算机。
  如何在 Chrome 中启用堆叠标签功能以获得更好的标签管理

火狐

  • 在浏览器窗口的右上角,单击 Firefox 菜单(三个水平平行线)。
  • 从下拉菜单中选择更多工具 > Web 开发人员 > 网络。
  • 单击设置按钮并打开持久日志选项。
  • 在捕获过程中,刷新页面并重复该问题。
  • 如果您已成功复制问题,则右键单击活动面板的任意行并选择全部保存为 HAR。
  • 最后,如果故障排除还需要控制台日志文件,请导航到控制台选项卡并通过右键单击任意行选择全部并将内容粘贴到某个文本文件中并将其共享到支持中心。

微软边缘

  • 单击右上角的…(三点图标),选择更多工具 > 开发人员工具。
  • 导航到网络选项卡并开始分析会话。
  • 访问网页并按照说明解决问题。
  • 最后通过选择“导出为 HAR”保存 HAR 文件

IE浏览器

  • 打开 Internet Explorer 并转到您遇到问题的页面
  • 单击右上角的齿轮符号。
  • 转到(开发人员工具 > 网络选项卡)
  • 在捕获过程中,刷新页面并复制问题。
  • 成功复制问题后,单击“导出为 HAR”图标(软盘形状)。

HTTP 监视工具

对于 Google Chrome、Internet Explorer 和 Microsoft Edge,您还可以使用 HTTPWatch (浏览器内 HTTP 嗅探器)用于捕获 Web 请求和响应。

  • 下载并安装 HTTPwatch 工具 第一的。
  • 启动 HTTPwatch 捕获并加载您遇到问题的页面,并在复制问题后立即停止捕获。
  • 并且捕获应该以 HAR 格式保存。

分析 HAR 文件的网站

这些工具在可视化和分析 HAR 文件(HTTP 客户端-服务器通信日志)方面简单而有效。

  • 谷歌 HAR 分析器 – 通过单击“选择文件”按钮选择一个文件,然后选择您要检查的 HAR 文件。 选择文件后会自动显示分析屏幕。 可以按 HTTP 状态代码进行过滤。
  • Softwareishard.com – 一个免费的基于 Web 的应用程序工具,它​​显示所有请求的瀑布图,并允许您深入挖掘特定请求。 将 HAR 日志插入下面的文本框中后,按 Preview 按钮。 或者,将 har 文件拖放到页面上的任意位置以开始分析文件。
  • 站点24×7 – 这也是一个免费的网站工具,用于可视化 HTTP 存档文件。 浏览文件或将其内容粘贴到输入框中。
  启用更好浏览的最佳 Chrome 标志

结论

如果您在文本编辑器中打开 HAR 文件,您会注意到它只是一个 JSON 文档,其中包含您的 Web 请求及其响应。 它可能包含以下潜在​​敏感信息:

  • 请求和响应标头
  • 请求和响应内容
  • 身份验证令牌、cookie、会话令牌、密码和 API 凭证

确保在将 HAR 文件提交给支持团队进行分析之前删除所有敏感信息。 主要是,如果技术支持团队请求与第三方交互的 HAR 文件,则可能会暴露关键信息。

我希望这篇文章对你学习 HAR 分析工具以及如何在不同的浏览器中生成 HAR 文件很有帮助。

您可能也有兴趣了解如何使用 Wireshark 解决网络延迟问题。

喜欢阅读这篇文章吗? 与世界分享如何?