真的好用!这个嵌在浏览器中的录像机，用了会上瘾?

开源最前线（ID：OpenSourceTop） 猿妹综合整理

项目地址：https://github.com/rrweb-io/rrweb

程序员有时候在客户环境 debug 时经常会遇到的一些问题，比如有些产品通常部署在客户的内?环境中，因此一旦出现问题只能通过各类远程操作工具登入客户环境中进行debug，操作的空间和时间都非常有限。如果遇到的问题棘手一些，Debug就更困难了。

为了解决这一难题，SmartX 前端团队开源了一个神器——rrweb，它可以实现Web录制与回放功能，它的应用场景十分广泛，诸如：

• 记录用户使用产品的方式并加以分析，进一步优化产品
• 采集用户遇到 bug 的操作路径，予以复现
• 记录 CI 环境中的 E2E 测试的执行情况
• 录制体积更小、清晰度无损的产品演示

目前，rrweb 已经在Github上标星 6.6K，Fork累计 409 个。（Github地址：https://github.com/rrweb-io/rrweb）

rrweb 主要由 3 部分组成：

• rrweb-snapshot，包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识；rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。
• rrweb，包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更（mutation）；replay 则是将记录的变更按照对应的时间一一重放。
• rrweb-player，为 rrweb 提供一套 UI 控件，提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。

使用指南

你可以通过jsdelivr的CDN安装：

function DisplayWindowSize(){

  var w=window.innerWidth
  || document.documentElement.clientWidth
  || document.body.clientWidth;
}

也可以在URL中指定具体的版本号，例如：

<script src="https://cdn.jsdelivr.net/npm/rrweb@0.7.0/dist/rrweb.min.js"></script>

rrweb代码分为录制和回放两部分，大多数时候用户在被录制的应用中只需要引入录制部分代码，同样可以通过CDN安装：

<script src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script>

安装完就可以开始录制了，通过 <script> 的方式仅引入录制部分，那么可以访问到全局变量rrwebRecord，它和全量引入时的rrweb.record使用方式完全一致，以下示例代码将使用后者。

rrweb.record({
  emit(event) {
    // 用任意方式存储 event
  },
});

rweb在录制时会不断将各类event传递给配置的emit方法，你可以使用任何方式存储这些event以便之后回放。调用record方法将返回一个函数，调用该函数可以终止录制：

let stopFn = rrweb.record({
  emit(event) {
    if (events.length > 100) {
      // 当事件数量大于 100 时停止录制
      stopFn();
    }
  },
});

如果需要回放，你要引入对应的CSS文件：

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.css"
/>

再通过以下JS代码初始化replayer：

const events = YOUR_EVENTS;

const replayer = new rrweb.Replayer(events);
replayer.play();

简而言之，rrweb不仅可用于界面测试，还可以用于游戏录制以及会议培训现场重放等。不知道你粉了么？