開源最前線（ID：OpenSourceTop） 猿妹綜合整理 項(xiàng)目地址：https://github.com/rrweb-io/rrweb
程序員有時(shí)候在客戶環(huán)境 debug 時(shí)經(jīng)常會遇到的一些問題，比如有些產(chǎn)品通常部署在客戶的內(nèi)?環(huán)境中，因此一旦出現(xiàn)問題只能通過各類遠(yuǎn)程操作工具登入客戶環(huán)境中進(jìn)行debug，操作的空間和時(shí)間都非常有限。如果遇到的問題棘手一些，Debug就更困難了。為了解決這一難題，SmartX 前端團(tuán)隊(duì)開源了一個(gè)神器——rrweb，它可以實(shí)現(xiàn)Web錄制與回放功能，它的應(yīng)用場景十分廣泛，諸如：記錄用戶使用產(chǎn)品的方式并加以分析，進(jìn)一步優(yōu)化產(chǎn)品 采集用戶遇到 bug 的操作路徑，予以復(fù)現(xiàn) 記錄 CI 環(huán)境中的 E2E 測試的執(zhí)行情況 錄制體積更小、清晰度無損的產(chǎn)品演示
目前，rrweb 已經(jīng)在Github上標(biāo)星 6.6K，F(xiàn)ork累計(jì) 409 個(gè)。（Github地址：https://github.com/rrweb-io/rrweb）rrweb-snapshot，包含 snapshot 和 rebuild 兩個(gè)功能。snapshot 用于將 DOM 及其狀態(tài)轉(zhuǎn)化為可序列化的數(shù)據(jù)結(jié)構(gòu)并添加唯一標(biāo)識；rebuild 則是將 snapshot 記錄的數(shù)據(jù)結(jié)構(gòu)重建為對應(yīng)的 DOM。 rrweb，包含 record 和 replay 兩個(gè)功能。record 用于記錄 DOM 中的所有變更（mutation）；replay 則是將記錄的變更按照對應(yīng)的時(shí)間一一重放。 rrweb-player，為 rrweb 提供一套 UI 控件，提供基于 GUI 的暫停、快進(jìn)、拖拽至任意時(shí)間點(diǎn)播放等功能。
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代碼分為錄制和回放兩部分，大多數(shù)時(shí)候用戶在被錄制的應(yīng)用中只需要引入錄制部分代碼，同樣可以通過CDN安裝：<script src='https://cdn./npm/rrweb@latest/dist/record/rrweb-record.min.js'></script>
安裝完就可以開始錄制了，通過 <script> 的方式僅引入錄制部分，那么可以訪問到全局變量rrwebRecord，它和全量引入時(shí)的rrweb.record使用方式完全一致，以下示例代碼將使用后者。rrweb.record({
emit(event) {
// 用任意方式存儲 event
},
});
rweb在錄制時(shí)會不斷將各類event傳遞給配置的emit方法，你可以使用任何方式存儲這些event以便之后回放。調(diào)用record方法將返回一個(gè)函數(shù)，調(diào)用該函數(shù)可以終止錄制：let stopFn = rrweb.record({
emit(event) {
if (events.length > 100) {
// 當(dāng)事件數(shù)量大于 100 時(shí)停止錄制
stopFn();
}
},
});
如果需要回放，你要引入對應(yīng)的CSS文件：<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不僅可用于界面測試，還可以用于游戲錄制以及會議培訓(xùn)現(xiàn)場重放等。不知道你粉了么？
●編號1039，輸入編號直達(dá)本文
●輸入m獲取文章目錄
|
