浏览器自带回放功能（这个嵌在浏览器中的录像机）
浏览器自带回放功能（这个嵌在浏览器中的录像机）functionDisplayWindowSize(){ varw=window.innerWidth ||document.documentElement.clientWidth ||document.body.clientWidth; }也可以在URL中指定具体的版本号，例如：你可以通过jsdelivr的CDN安装：目前，rrweb 已经在Github上标星 6.6K，Fork累计 409 个。（Github地址：https://github.com/rrweb-io/rrweb）rrweb 主要由 3 部分组成：使用指南
开源最前线（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安装：
functionDisplayWindowSize(){
varw=window.innerWidth
||document.documentElement.clientWidth
||document.body.clientWidth;
}
也可以在URL中指定具体的版本号，例如：
<scriptsrc="https://cdn.jsdelivr.net/npm/rrweb@0.7.0/dist/rrweb.min.js"></script>
rrweb代码分为录制和回放两部分，大多数时候用户在被录制的应用中只需要引入录制部分代码，同样可以通过CDN安装：
<scriptsrc="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方法将返回一个函数，调用该函数可以终止录制：
letstopFn=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：
constevents=YOUR_EVENTS;
constreplayer=newrrweb.Replayer(events);
replayer.play();
简而言之，rrweb不仅可用于界面测试，还可以用于游戏录制以及会议培训现场重放等。不知道你粉了么？
