在开发工作中，你是否遇到过这样的场景：
当你需要开发某个功能时，这个功能依赖一系列的点击或者选择操作，才能获取到最终的数据。而在开发和调试的过程中，你往往需要多次验证流程的正确性。早期的时候，这种验证通常非常繁琐——你可能需要反复提交表单、重新执行操作流程，才能完成一次完整的自测。
如今，这一切变得更加高效了。
现在，我们可以使用记录器（Recorder）来优化这一开发流程。这个工具允许你将整个操作过程录制下来，保存为一个可复现的操作记录。每次需要重新验证或提交流程时，只需一键执行这条记录，便能完成所有的重复性操作。
更棒的是，这个功能还支持二次编辑。如果你需要在某个步骤后面新增额外的操作，或者减少不必要的步骤，都可以轻松修改操作记录，而无需重新录制整个流程。
🚀 功能亮点与用途
1. 高效的开发与调试
对于开发者来说，这个功能不仅可以节省大量时间，还能确保操作流程的准确性，避免因手动操作而导致的遗漏或错误。
2. 性能监控的得力助手
谷歌推出这个功能的主要目的是为了帮助开发者更方便地监听用户在某些操作流程中的性能体验。例如，在查看录制的操作流程时，你可以直接点击某个步骤，跳转到性能面板（Performance Panel），并且工具会自动锁定当前帧的数据。这种体验优化相比以往手动查找性能问题，提升了不少效率。
3. 测试自动化的天然工具
如果你是一名测试人员，这个功能同样非常实用。操作流程录制完成后，你可以直接将其导出为Puppeteer脚本，方便地将其集成到你的自动化测试中，进一步提升测试的覆盖率和效率。
🚀 使用方法
我们以表单提交为例子展示
以下是如何使用记录器功能的步骤：
1. 💎 打开记录器
并点击创建新录制按钮
2. 💎 开始录制流程
可以重命名下，方便后续复用，然后点击最下方的开始录制按钮
我们在填写完表单，并且点击sumbit按钮，然后点击控制台的结束录制按钮，可以看到我们的每个步骤都被记录下来
3. 💎 执行录制
在 记录器面板中，点击播放按钮，浏览器会自动按照录制的流程重新执行操作。你可以在执行过程中观察页面行为，确认流程是否正确。 如果遇到下面的情况，说明是超时了，需要设置下超时时间
点击这个地方展开就可以重新设置超时限制参数了
然后你点击播放按钮就一切正常了
4. 💎 查看和编辑录制
你可以在记录器 面板中，看到录制的每个步骤，包含操作类型（如点击、输入、导航等）和目标元素。
你也可以点击每个步骤进行详细查看，也可以通过右键菜单进行编辑，例如增加新步骤、删除步骤或修改操作。
🚀 应用场景
1. 💎 表单提交及验证
录制复杂的表单提交流程，方便反复验证数据的提交逻辑是否正确。这个场景如上，相信你也感受它的便利性了。
2. 💎 性能优化
在模拟用户真实操作的同时，快速捕捉性能瓶颈，定位问题并优化。
点击性能面板按钮，等待自动回填数据，然后跳到性能面板，为了压缩我把很多帧去掉了
最终你可以在如下的性能面板开始分析了
3. 💎 自动化测试开发
如果需要将录制的流程用于自动化测试，可以点击导出 按钮，将其导出为Puppeteer 脚本或者json数据，这样可以减少编写测试脚本的时间，通过导出的Puppeteer 脚本直接复用操作流程。我不是测试人员就不多赘述了。
🚀 小结
“记录器”功能的出现，不仅让开发和调试更加高效，还为性能监控和测试自动化提供了重要支持。它减少了重复操作的浪费，让开发者和测试人员都能将更多精力集中在核心工作上。
是不是觉得这个功能非常有趣又实用？赶紧试试看吧！
我是 ssh，工作 6 年+，阿里云、字节跳动 Web infra 一线拼杀出来的资深前端工程师 + 面试官，非常熟悉大厂的面试套路，Vue、React 以及前端工程化领域深入浅出的文章帮助无数人进入了大厂。 欢迎 长按图片加 ssh 为好友，我会第一时间和你分享前端行业趋势，学习途径等等。2024 陪你一起度过！
