使用 Chrome 开发者工具录制、重放和衡量用户流

使用 Chrome 开发者工具录制、重放和衡量用户流

关于此 Codelab

subject上次更新时间:4月 11, 2022
account_circleJecelyn Yeen 编写

1. 简介

您可以使用“Recorder”面板录制、重放和衡量用户流。

请观看下方视频,大致了解新的“Recorder”面板(预览版功能)。

学习内容

  • 录制用户流
  • 重放用户流
  • 修改用户流
  • 衡量用户流

所需条件

  • 一台可正常运行的计算机和稳定的 Wi-Fi 连接
  • Chrome 101 及更高版本。

2. 打开“记录器”面板

按照以下步骤打开“Recorder”面板

  1. 打开开发者工具
  2. 依次点击 More options > More tools > Recorder菜单中的“Recorder”选项 或者,使用命令菜单打开 Recorder 面板。在命令菜单中显示 Recorder 命令

3. 开始

我们将使用下方的咖啡订购演示页面。结账是购物网站中常见的用户流。

在接下来的部分中,我们将向您演示如何使用“Recorder”面板录制、重放和衡量以下结账流程:

  1. 将一杯咖啡加入购物车。
  2. 再将一杯咖啡加入购物车。
  3. 进入购物车页面。
  4. 从购物车中移除一杯咖啡。
  5. 开始结账流程。
  6. 填写付款信息。
  7. 结账。

4. 录制用户流

  1. 打开演示页面。点击 Start new recording 按钮以开始录制。
  2. Recording name 文本框中输入“coffee checkout”。开始录制新内容
  3. 点击 Start a new recording 按钮。录制随即开始。面板中会显示 Recording...,表示正在进行录制。正在录制
  4. 点击“Cappuccino”将其加入购物车。
  5. 点击“Americano”将其加入购物车。请注意,Recorder 会显示您到目前为止已执行的步骤。“Recorder”面板中的步骤
  6. 进入购物车页面。
  7. 从购物车中移除“Americano”。
  8. 点击“Total: $19.00”按钮,开始结账流程。
  9. 在付款信息表单中,填写“Name”和“Email”文本框,然后选中“I would like to receive order updates and promotional messages.”复选框。付款信息表单
  10. 点击“Submit”按钮完成结账流程。
  11. Recorder 面板中,点击 End recording 按钮结束录制。

5. 重放用户流

录制完用户流后,您可以点击 Replay 按钮重放用户流。

您在页面上可以看到用户流的重放过程。重放进度也会显示在 Recorder 面板中。

您可以通过配置 Replay settings 来模拟慢速网络连接。例如,展开 Replay settings,然后在 Network 下拉菜单中选择 Slow 3G重放设置

您还可以为所有步骤设置更长的超时

我们将来可能会支持更多设置。欢迎与我们分享您想要的重放设置!

6. 衡量用户流

通过点击 Measure performance 按钮,可以衡量用户流的性能。例如,结账是购物网站的关键用户流。使用 Recorder 面板,您可以录制结账流程一次,然后定期衡量这一用户流的性能。

点击 Measure performance 按钮会先触发用户流重放,然后会在 Performance 面板中打开性能跟踪记录。

不妨了解如何使用 Performance 面板来分析页面的运行时性能。您可以在 Performance 面板上选中“Web Vitals”复选框,以查看网页指标,发掘提升用户浏览体验的机会。

“Performance”面板

7. 修改用户流

我们来逐个了解一下用于修改用户流的选项。

在开发者工具中,“Recorder”面板的顶栏中包含一个下拉菜单,供您用来选择要修改的用户流

Recorder 面板的顶端有一些选项,可供您:

  1. 添加新的录制内容。点击 + 图标可添加新的录制内容
  2. 查看所有录制内容。此下拉菜单会显示已保存的录制内容的列表。选择 [数字] recording(s) 选项可展开和管理已保存的录制内容的列表。查看所有录制内容
  3. 导出录制内容。您可以将用户流导出为 Puppeteer 脚本,以便进一步自定义该脚本。
  4. 删除录制内容。删除所选的录制内容。

您还可以修改录制内容的名称,只需点击其旁边的修改按钮即可。

8. 修改步骤

我们来逐个了解一下用于修改工作流中步骤的选项。

展开步骤

  1. 展开每个步骤即可查看相应操作的详细信息。例如,展开 Click 元素下的“Cappuccino”步骤。在“Recorder”面板中,“Cappuccino”元素已展开,显示了类型、目标、选择器、X 轴偏移和 Y 轴偏移。
  2. 上面的步骤显示了两个选择器。如需了解详情,请参阅选择器优先级。重放用户流时,Recorder 会按顺序尝试使用其中一个选择器来查询该元素。例如,如果 Recorder 成功使用第一个选择器查询到该元素,则会跳过第二个选择器,然后继续执行下一步。
  3. 您可以添加或移除任何选择器。例如,您可以移除“selector #2”,因为在本例中仅使用 aria/Cappuccino 就足够了。将光标悬停在“selector #2”上,然后点击 - 即可将其移除。开发者工具的“Recorder”面板显示了一个用于移除选择器的选项
  4. 选择器也是可修改的。例如,如果您要选择“Mocha”而非“Cappuccino”,可以将选择器值改为“aria/Mocha”。修改选择器 或者,点击 Select 按钮,然后点击页面上的“Mocha”。
  5. 此时重放用户流,它应会选择“Mocha”而非“Cappuccino”。
  6. 尝试修改其他步骤属性,如 typetargetvalue 等。

添加和移除步骤

我们还提供了用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤,这些选项会非常有用。您无需重新录制用户流,只需修改它即可。为此,请点击相应步骤旁边的三点状(形似烤肉串)菜单以打开菜单。

开发者工具中显示的咖啡购物车界面,包括 Scroll 事件的已展开菜单,其中显示了三个选项:“Add step before”“Add step after”和“Remove step”。

  1. 例如,Scroll 事件中 Mocha 步骤后面的部分就没有必要。您可以选择 Remove step 将其移除。
  2. 假设您想等到 9 杯咖啡全显示在页面上后,再执行任何步骤。
  3. 在 Mocha 步骤的菜单中,选择 Add step before添加了一个名为“Assert Element”的新步骤,该步骤现在可供修改
  4. 在“Assert Element”中,按照以下详细说明修改新添加的这个步骤:
    • type:waitForElement
    • selector #1:.cup
    • operator:==(点击 Add operator 按钮)
    • count:9(点击 Add count 按钮)已按照上述详细说明更新了咖啡结账用户流的新步骤。
  5. 现在重放该用户流以查看具体变化。

9. 恭喜!

恭喜!您已成功完成此 Codelab!

顺便提一下,您也可以自定义录制内容的选择器。如需了解详情,请参阅我们的文档

您觉得此 Codelab 怎么样?