前端神器rrweb实用案例及JS下载

最新推荐文章于 2024-08-09 07:52:33 发布

热爱丶

最新推荐文章于 2024-08-09 07:52:33 发布

阅读量4.2k

点赞数 2

文章标签： js html

本文链接：https://blog.csdn.net/w926400c/article/details/106867343

版权

偶然发现这款前端神器工具，首先关于rrweb：

这个工具能将用户在 Web 页面上的操作过程记录下来，并转成可序列化的日志数据，也可进行回放。程序员可以拿它来远程调试 Bug，产品经理可以拿来收集分析用户行为，感觉还挺实用。

尊重成果，前人铺路：

知乎大神分析原理：https://zhuanlan.zhihu.com/p/60639266
rrweb官网：https://www.rrweb.io/
rrweb GIT项目地址：https://github.com/rrweb-io/rrweb
CSDN大神的案例：https://blog.csdn.net/blackcat88/article/details/88972515

以上，为rrweb简单介绍及本文参考的文档案例，不多赘述，直接贴代码。

注：目前查到的案例都是用的在线公网上的js,css文件等，如果是内网无法使用，本文中我查询多个案例，把公网的js,css文件扒下来了，如果不足的地方，欢迎指正，讨论。代码连接在最下面。

1.head引用文件

<head>
    <meta charset="UTF-8">
    <title>rrweb测试</title>
    <script src="js/jquery.min.js"></script>
    <!--rrweb对象，录制使用-->
    <script src="js/rrweb.min.js"></script>
    <script src="js/rrweb-record.min.js"></script>
    <!--回放用到的js,和css-->
    <script src="js/rrweb-index.js"></script>
    <link rel="stylesheet" href="css/rrweb.min.css">
</head>

2.随便写的html代码，模拟业务网站等

<body>
<div style="float: left;">
    <h1>这里模拟一些html代码：</h1>
    <label>用户名</label><input type="text" style="height: 30px;width: 200px;">
    <label>密码</label><input type="password" style="height: 30px;width: 200px;">
    <label>邮箱</label><input type="email" style="height: 30px;width: 200px;">
    <label>备注</label><textarea style="height: 80px;width: 200px;"></textarea>
</div>

<div style="float: left;">
<h1>模拟背景颜色，用来检验录屏画质</h1>
<div style="width: 100%;height: 50px;background-color: red;"></div>
<div style="width: 100%;height: 50px;background-color: green;"></div>
<div style="width: 100%;height: 50px;background-color: #ff50d0;"></div>
<div style="width: 100%;height: 50px;background-color: #7eff1f;"></div>
</div>
<p></p>
<div style="float: left;">
    <h1>视频回放</h1>
    <div id="playback" style="width: 1000px;height: 500px;background-color: #cccccc"></div>
</div>
<button onclick="get_start()">点击录制</button>
<button onclick="playback()">点击播放</button>
</body>

3.script函数

<script>
    //1.存放DOM节点数据
    let events = [];
    //2.点击录制
    function get_start() {
        //rrwebMin 为启动对象
        //record() 方法启动录制
        //emit会监听所有的DOM的动作， 鼠标等，
        rrwebMin.record({
            emit(event) {
                // 用任意方式存  储 event
                console.log(event);
                events.push(event);
            },
        });
        alert('正在录制')
    }
    //3.这一步，应该把数据转为JSON ，然后发送到后台存储，可以写个循环，10S发送一次，再定义一个窗口关闭事件监听，最后关闭时发送一次数据
    //SON.stringify({ events });

    //4.点击回放
    function playback() {
        new rrwebPlayer({
            target: document.getElementById('playback'), // 可以自定义 DOM 元素
            data: {events,},
        });
    }
</script>