如何收集HAR数据

概览

HAR数据是在解决网站和网页连接性问题时非常宝贵的工具。 它提供了有关浏览器和服务器之间连接的宝贵洞察,提供了帮助识别潜在根本原因的重要信息。

本文概述了在常用浏览器中如何捕获HAR数据。

环境

谷歌 Chrome

Mozilla Firefox

Microsoft Edge

Apple Safari

说明

在本节中,我们将向您展示如何在Windows和Mac上一些常用浏览器中捕获HAR数据。

谷歌 Chrome:

  1. 在您的计算机上打开Google Chrome。

  2. 转到您想要捕获HAR数据的网页或网站。

  3. 在页面上的任意位置右键单击,从上下文菜单中选择"检查"。 或者,您可以使用键盘快捷键 Ctrl + Shift + I(或 Mac 上的 Command + Option + I)。

  4. 这将打开Chrome开发者工具面板。 确保您在开发者工具中的"网络"标签内。

  5. 单击开发者工具面板左上角的"记录"按钮(一个小圆圈)。 它应该变成红色,以指示正在记录网络请求。

  6. 与网页交互,执行操作或重现您想捕获的连接性问题。

  7. 一旦重现了问题或收集了所需的数据,请点击开发者工具面板中的"停止"按钮(一个小方形)。 这将停止记录网络活动。

  8. 您现在可以在网络标签内探索捕获的网络请求和数据。 您可以根据需要过滤、排序和分析请求。

  9. 要将捕获的数据保存为 HAR 文件,请点击工具栏中的下载按钮(导出 HAR)。 选择适当的位置保存HAR文件,并为其提供一个合适的名称。

Mozilla Firefox:

  1. 在您的计算机上打开Mozilla Firefox。

  2. 转到您想要捕获HAR数据的网页或网站。

  3. 在页面上的任意位置右键单击,从上下文菜单中选择"检查元素"。 或者,您可以使用键盘快捷键 Ctrl + Shift + I(或 Mac 上的 Command + Option + I)。

  4. 这将打开Firefox开发者工具面板。 确保您在开发者工具中的"网络"标签内。

  5. 录制应自动开始。

  6. 与网页交互,执行操作或重现您想捕获的连接性问题。

  7. 一旦重现了问题或收集了所需的数据,为了保存捕获的数据为HAR文件,在网络标签内任意位置右键单击,选择"保存全部为HAR"。 选择适当的位置保存HAR文件,并为其提供一个合适的名称。

Microsoft Edge:

  • 在您的计算机上打开Microsoft Edge。

  • 转到您想要捕获HAR数据的网页或网站。

  • 在页面上的任意位置右键单击,从上下文菜单中选择"检查"。 或者,您可以使用键盘快捷键 Ctrl + Shift + I(或 Mac 上的 Command + Option + I)。

  • 这将打开Microsoft Edge开发者工具面板。 确保您在开发者工具中的"网络"标签内。

  • 单击开发者工具面板左上角的"记录"按钮(一个小圆圈)。 它应该变成红色,以指示正在记录网络请求。

  • 与网页交互,执行操作或重现您想捕获的连接性问题。

  • 一旦重现了问题或收集了所需的数据,请点击开发者工具面板中的"停止"按钮(一个小方形)。 这将停止记录网络活动。

  • 您现在可以在网络标签内探索捕获的网络请求和数据。 您可以根据需要过滤、排序和分析请求。

  • 要将捕获的数据保存为 HAR 文件,在网络标签内任意位置右键单击,鼠标悬停到复制选项并选择"将全部复制为 HAR(含敏感数据)"。 选择适当的位置保存HAR文件,并为其提供一个合适的名称。

Apple Safari:

  1. 在您的Mac计算机上打开Safari。

  2. 转到您想要捕获HAR数据的网页或网站。

  3. 如果开发菜单尚未显示,请启用Safari中的开发菜单。 要执行此操作,请转到Safari > 设置。 在设置窗口中,点击"高级"标签,然后勾选"在菜单栏中显示开发菜单"。
    developmenu.jpg

  4. 启用开发菜单后,进入菜单栏中的开发菜单并选择"显示Web检查器"。
    webinspector.jpg

  5. 这将打开Safari的Web检查器面板。 确保您在Web检查器中的"网络"标签内。

  6. 与网页交互,执行操作或重现您想捕获的连接性问题。
  7. 您现在可以在网络标签内探索捕获的网络请求和数据。 您可以根据需要过滤、排序和分析请求。
  8. 要将捕获的数据保存为HAR文件,在名称列下的任意位置右键单击并选择"导出HAR",选择适当的位置保存HAR文件,并为其提供一个合适的名称。

这篇文章有帮助吗?

2 人中有 1 人觉得有帮助

0 条评论