rrweb適用場景：
- 用戶行為分析；
- 遠程debug；
- 錄制操作；
- 實時協作；
項目github：https://github.com/rrweb-io/rrweb ，覺得有用，記得幫他加個星~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>rrweb demo web site</title> <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/rrweb.min.js"></script> <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb@latest/dist/record/rrweb-record.min.js"></script> <link rel="stylesheet" crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css" /> <script crossorigin="anonymous" src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script> </head> <body> <h1 class="some-title">this is some title for test</h1> <input type="button" value="開始錄制" onclick="record()" /> <br /> <input type="button" value="結束錄制" onclick="replay()" /> <div id="replaycontent"> </div> <script> window.events = []; function record() { rrweb.record({ emit(event) { // 將 event 存入 events 數組中 events.push(event); console.log(event); }, }); } function replay() { new rrwebPlayer({ target: document.getElementById("replaycontent"), // 可以自定義 DOM 元素 data: { events, }, }); } // save 函數用於將 events 發送至后端存入，並重置 events 數組 function save() { const body = JSON.stringify(window.events); console.log(body) events = []; fetch("http://localhost:8080/api", { method: "POST", headers: { "Content-Type": "application/json", }, body, }); } // 每 10 秒調用一次 save 方法，避免請求過多 setInterval(save, 10 * 1000); </script> </body> </html>