使用 Chrome 开发者工具录制、重放和衡量用户流
关于此 Codelab
subject上次更新时间:4月 11, 2022
1. 简介
您可以使用“Recorder”面板录制、重放和衡量用户流。
请观看下方视频,大致了解新的“Recorder”面板(预览版功能)。
学习内容
- 录制用户流
- 重放用户流
- 修改用户流
- 衡量用户流
所需条件
- 一台可正常运行的计算机和稳定的 Wi-Fi 连接
- Chrome 101 及更高版本。
2. 打开“记录器”面板
按照以下步骤打开“Recorder”面板
3. 开始
我们将使用下方的咖啡订购演示页面。结账是购物网站中常见的用户流。
在接下来的部分中,我们将向您演示如何使用“Recorder”面板录制、重放和衡量以下结账流程:
- 将一杯咖啡加入购物车。
- 再将一杯咖啡加入购物车。
- 进入购物车页面。
- 从购物车中移除一杯咖啡。
- 开始结账流程。
- 填写付款信息。
- 结账。
4. 录制用户流
- 打开演示页面。点击 Start new recording 按钮以开始录制。
- 在 Recording name 文本框中输入“coffee checkout”。
- 点击 Start a new recording 按钮。录制随即开始。面板中会显示 Recording...,表示正在进行录制。
- 点击“Cappuccino”将其加入购物车。
- 点击“Americano”将其加入购物车。请注意,Recorder 会显示您到目前为止已执行的步骤。
- 进入购物车页面。
- 从购物车中移除“Americano”。
- 点击“Total: $19.00”按钮,开始结账流程。
- 在付款信息表单中,填写“Name”和“Email”文本框,然后选中“I would like to receive order updates and promotional messages.”复选框。
- 点击“Submit”按钮完成结账流程。
- 在 Recorder 面板中,点击 End recording 按钮结束录制。
6. 衡量用户流
通过点击 Measure performance 按钮,可以衡量用户流的性能。例如,结账是购物网站的关键用户流。使用 Recorder 面板,您可以录制结账流程一次,然后定期衡量这一用户流的性能。
点击 Measure performance 按钮会先触发用户流重放,然后会在 Performance 面板中打开性能跟踪记录。
不妨了解如何使用 Performance 面板来分析页面的运行时性能。您可以在 Performance 面板上选中“Web Vitals”复选框,以查看网页指标,发掘提升用户浏览体验的机会。
8. 修改步骤
我们来逐个了解一下用于修改工作流中步骤的选项。
展开步骤
- 展开每个步骤即可查看相应操作的详细信息。例如,展开 Click 元素下的“Cappuccino”步骤。
- 上面的步骤显示了两个选择器。如需了解详情,请参阅选择器优先级。重放用户流时,Recorder 会按顺序尝试使用其中一个选择器来查询该元素。例如,如果 Recorder 成功使用第一个选择器查询到该元素,则会跳过第二个选择器,然后继续执行下一步。
- 您可以添加或移除任何选择器。例如,您可以移除“selector #2”,因为在本例中仅使用
aria/Cappuccino
就足够了。将光标悬停在“selector #2”上,然后点击 - 即可将其移除。 - 选择器也是可修改的。例如,如果您要选择“Mocha”而非“Cappuccino”,可以将选择器值改为“aria/Mocha”。
或者,点击 Select 按钮,然后点击页面上的“Mocha”。
- 此时重放用户流,它应会选择“Mocha”而非“Cappuccino”。
- 尝试修改其他步骤属性,如 type、target、value 等。
添加和移除步骤
我们还提供了用于添加和移除步骤的选项。如果您想添加额外步骤或移除意外添加的步骤,这些选项会非常有用。您无需重新录制用户流,只需修改它即可。为此,请点击相应步骤旁边的三点状(形似烤肉串)菜单以打开菜单。
- 例如,Scroll 事件中 Mocha 步骤后面的部分就没有必要。您可以选择 Remove step 将其移除。
- 假设您想等到 9 杯咖啡全显示在页面上后,再执行任何步骤。
- 在 Mocha 步骤的菜单中,选择 Add step before。
- 在“Assert Element”中,按照以下详细说明修改新添加的这个步骤:
- type:waitForElement
- selector #1:.cup
- operator:==(点击 Add operator 按钮)
- count:9(点击 Add count 按钮)
- 现在重放该用户流以查看具体变化。