Developer篇-Recorder录像机

当项目进入测试阶段的时候，就进入到由QA主导的阶段，一般在公司里边都会有需求/bug系统，而QA在测试阶段遇到的bug往往也会通过系统记录下来。

一般负责任的QA会将复现步骤详细描述一下，而有些不负责任的QA往往只会通过一句话说明哪里有bug，这个时候前端同学往往一头雾水，心里想着我本地是没问题的呀，但是QA又将bug提了过来，而自己的操作又不能复现bug，这个时候只能去找到QA面对面的询问详细步骤，让QA给当面复现一下，这个时候有可能还会遭到QA的不耐心和白眼（PS：QA心理：自己写的bug都找不出来吗，是不是就没去找，直接来问）。

这个痛点我想做前端的各位同学或多或少都会遇见，我想谷歌的开发工程师可能也遇见了这个问题，所以在chrome97版本的时候Developer Tools更新了一个新的功能，那就是Recorder录像机功能，那么接下来跟着笔者来看一下这个功能为什么能解决我们的痛点吧。

Recorder展示

• 三大功能：

  • 在您的网站或应用程序上记录常见的用户操作
  • 重新播放记录的操作，用来检查操作流程是否正常
  • 生成详细的性能跟踪或导出 Puppeteer 脚本进行测试

1、在您的网站或应用程序上记录常见的用户操作

可以通过Start new recording创建一个新的recorder录播器名字

输入名称，然后点击start a new recording就开始录制一个新的流程；

可以看到，我们已经记录了本次操作流程，那么只要点击Replay重新播放按钮就可以，重新观看本次操作流程。

2、重新播放记录的操作，用来检查操作流程是否正常

在回放的过程中由于点击错误或某些内容不起作用，还可以自定义调试，例如减慢回放速度，设置断点并逐步执行，编辑操作（例如删除某次操作节点，增加某次操作等）；

1. 模拟慢速网络

   可以通过点击Replay选项来选择网速的快慢!

   

2. 编辑操作

   

可以通过点击某一次操作节点的，然后根据自己的实际需求去增加/删除操作节点信息或者给该节点打断点来观察，这些都可以有效的来让我们的bug更好的复现；

3、生成详细的性能跟踪或导出 Puppeteer 脚本进行测试

有时候我们在做性能优化的时候，需要去操作页面流程来观察那一块的操作可能会使我们的性能消耗提升，在之前可能需要在performance项去观察，但是由于performance是从页面加载到操作结束的，所以中间流程较多并不易于观察，但是又了Recorder之后，我们可以很好的单独观察只是本次操作过的性能火焰图。

可以点击Performance panel来打开火焰图观察在这些操作过程中是否有性能损耗严重的操作，然后根据火焰图来有针对性的优化代码。

功能介绍完了，那么回到开始的问题，QA发现bug后怎么给我们呢，那就要用到导出功能。

目前共可以导出三种格式

• 导出为 JSON 文件。将录音下载为 JSON 文件。

  • 是可读的JSON对象，并且可以讲JSON文件导入回Recorder来进行重播回放；

• 导出为 @puppeteer/replay 脚本。将录音下载为Puppeteer Replay脚本。

  • 该脚本也是一个JSON对象，如果想集成CI/CD等功能，则可以使用该种模式，转换为JSON后并导回Recorder中，也可以进行重播回放；

• 导出为 Puppeteer 脚本。将录音下载为Puppeteer脚本。

  • 该导出为一个js，可以进行更细粒度的自定义，例如循环这些步骤，但是该js文件不能导回Recorder中；

基于此，可以让QA同学创建一个Recorder，选择Export as a JSON file文件，将该文件上传至流程系统或者通过通讯工具传给前端同学，那么前端同学就可以更好的复现bug；