Web应用程序演示的DOM记录

为了展示我们的Pernosco调试器的功能，我们需要许多有关应用程序界面的简短演示视频。常规视频相对较重且有损；我们想要更多类似Asciinema的东西，但是对于我们的Web应用程序，不仅仅是终端。因此，我们创建了DOMRec，一个DOM记录器。该方法非常简单。为了录制演示，我们将DOMRec脚本注入到我们的应用程序中。 DOMRec捕获当前DOM状态，并使用DOM Mutation Observer记录所有DOM状态更改以及相关的时间戳。要重放该演示，我们创建一个iframe，将其记录为初始DOM状态，然后重放DOM状态随时间的变化。重播会插入指向原始样式表的链接，但不会加载或执行原始脚本。 （当然，不可能这么简单...请参见下文。）最终的演示非常紧凑（我们的大多数演示压缩后不到100KB），几乎可以在任何浏览器/设备上使用，并且在任何缩放下都具有完美的像素水平。当不需要动态时，DOMRec支持单帧屏幕截图。我们无法使用浏览器HTML5视频控件，但我们实现了播放/暂停/全屏按钮。捕获DOM状态还不够，因为DOM中没有某些与渲染相关的状态。 DOMRec记录鼠标移动和单击事件，并在重播期间显示伪造的鼠标光标和单击效果。 DOMRec跟踪焦点更改，并在重播期间对相关DOM元素设置“假焦点”类；除了真正的：focus和：focus-with伪类外，我们的应用程序样式表还会检查这些类。必要时，DOMRec会创建一个假插入符。 DOMRec捕获滚动偏移，并尽最大努力在记录和重放期间匹配滚动位置。画布绘制操作不会更改DOM，也不会触发事件，因此我们的应用程序手动触发DOMRec侦听的“ didDrawCanvas” DOM事件。有时Pernosco客户端需要触发样式刷新以使CSS转换正常工作，这也需要在重播期间发生，因此我们也为此触发了一个特殊的通知事件。这有点特别-我们仅实现了满足需求的内容，而没有更多内容-但是它至少可以正确处理Microsoft的Monaco编辑器，这非常复杂。 DOMRec可以记录手动执行的演示，但是实际上，我们的演示是使用Selenium编写的脚本，以便我们可以在应用程序界面更改后重建演示影片。这种事情肯定已经建立了很多次（请参阅Inspectlet及其竞争对手），因此，几年前我第一次研究此问题时，我以为我会找到一个开源的现成解决方案。不幸的是，我找不到一个看起来容易使用的东西。现在，我们发布具有MIT许可证的DOMRec。说实话，我们也不是在努力使DOMRec易于使用。如上所述，需要调整某些应用程序才能使用它，并且此博客文章介绍了有关文档方面的所有内容。尽管如此，它只有1200行独立的Javascript，所以人们可能会发现它比从头开始更容易。