开源最前线(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-snapshot,包含 snapshot 和 rebuild 两个功能。snapshot 用于将 DOM 及其状态转化为可序列化的数据结构并添加唯一标识;rebuild 则是将 snapshot 记录的数据结构重建为对应的 DOM。 rrweb,包含 record 和 replay 两个功能。record 用于记录 DOM 中的所有变更(mutation);replay 则是将记录的变更按照对应的时间一一重放。 rrweb-player,为 rrweb 提供一套 UI 控件,提供基于 GUI 的暂停、快进、拖拽至任意时间点播放等功能。
function DisplayWindowSize(){
var w=window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; }
<script src='https://cdn./npm/rrweb@0.7.0/dist/rrweb.min.js'></script>
rrweb代码分为录制和回放两部分,大多数时候用户在被录制的应用中只需要引入录制部分代码,同样可以通过CDN安装:<script src='https://cdn./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(); } }, });
<link rel='stylesheet' href='https://cdn./npm/rrweb@latest/dist/rrweb.min.css' />
const events = YOUR_EVENTS;
const replayer = new rrweb.Replayer(events); replayer.play();
简而言之,rrweb不仅可用于界面测试,还可以用于游戏录制以及会议培训现场重放等。不知道你粉了么?
●编号1039,输入编号直达本文
●输入m获取文章目录
|