Firefox Web Replay - 前端开发者的未来利器

向右看齐 2023-10-05 12:44 12阅读 0赞

![format_png][]

如果你是一个前端开发者，那么最困扰你的问题通常不是如何修复bug，还是如何在你的开发环境上重现bug。经常会遇到的情况是，收到测试团队或用户发来的bug，在自己的开发环境上死活也重现不了。差一点的bug报告只有文字描述或屏幕截图，好一点的bug报告可能有录制的视频。即便是有视频，按照上面的步骤一步一步来，也未必能够重现bug。前端代码的运行情况比较复杂，bug的出现可能与数据相关，也可能与时序相关。如何可靠的重现bug就成了前端开发中的一个老大难问题。现在好了，Firefox的Web Replay可能会在未来成为你的必备工具，成为Firefox的杀手锏功能，并改变目前在开发者中Chrome独大的局面。

--------------------

**Firefox Web Replay是什么？**

Firefox Web Replay是Firefox还在试验性阶段的新功能。目前该功能只在macOS上的Firefox Nightly版本可用。简单来说，Firefox Web Replay可以录制Firefox标签页上的行为，并进行重放。这里所说的重放，可不是简单的视觉上的重放，而是高保真的。JavaScript、DOM和CSS的行为都可以精准的重放。这就意味着在重放时，你可以检查任意时刻中页面上的JavaScript对象、DOM元素和CSS的状态，还可以随时插入断点进行调试。

有了Firefox Web Replay的功能，不管是测试人员还是用户，都只需要把录制的结果保存下来并发给你。你就可以在Firefox中加载录制结果文件进行查看，还可以随时添加JavaScript断点进行调试。这实在是太cool了。

--------------------

**尝鲜试用Firefox Web Replay**

如果你想尝试Firefox Web Replay，需要下载macOS上的Firefox Nightly版本。Web Replay功能应该已经默认启用。可以在地址栏访问about:config，并检查设置devtools.recordreplay.enabled的值是否为true。如果Web Replay已启用，可以在Firefox的Tools -> Web Developer菜单项下看到Web Replay菜单。

如果你只是需要进行录制并报告错误，通过菜单项Tools -> Web Developer -> Web Replay -> Open New Recording Tab打开一个标签页。在这个标签页中进行操作。等操作完成之后，通过Tools -> Web Developer -> Web Replay -> Save Recording菜单项保存录制结果，就可以发送给开发人员了。

当你收到一个录制文件时，使用Tools -> Web Developer -> Web Replay -> Load Recording in New Tab来加载录制文件。这个时候你可以看到完整的回放过程。如果需要调试，可以打开Firefox的开发者工具，添加断点即可。

在录制过程中，同样可以添加断点进行调试。这些断点和在Console上输出的消息会在录制结果中以检查点的形式出现。点击这些检查点可以直接跳转到相应的时间点。

下面的截图是Firefox Web Replay回放时的界面。开发者工具上的蓝色条是回放时间轴。上面的小蓝点代表检查点。通过时间轴上的按钮可以往前或往后移动。当添加断点之后，可以看到在某一时刻JavaScript对象的实际值。

![format_png 1][]

--------------------

**Firefox Web Replay的状态**

目前的Firefox Web Replay还是处于非常早期的阶段，非常的不稳定。如果在录制时进行调试，经常会出现标签页崩溃的情况。建议等到该功能相对稳定之后再尝试。

可以预期到的是，Firefox Web Replay一旦成熟，将成为前端开发人员手中的利器。很多开发人员会从Chrome转移到Firefox上来。

[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X2pwZy85ZlRRdFk1Q09mR2xVSG5yRUJuWkhIc0tTbUFVNDE3eDF5UXVlSTdLQmlhQllyZm9JRWYyVnFwMFhTV09KdElKRWNaNWliVmNvUmJZUHk5NzIwR04yUWR3LzY0MA?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy85ZlRRdFk1Q09mR2xVSG5yRUJuWkhIc0tTbUFVNDE3eFEyaWNGOVhPNGVuSmpYNVlyWXBZWDA0ZlVhaWFBaGI2NEEyaEVNaGY5Y0JhQllyN09PdDRhZFFBLzY0MA?x-oss-process=image/format,png