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

程序员文章站 2022-07-05 17:25:18

...

偶然发现这款前端神器工具，首先关于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>

页面是这样的，点击录制，开始监控DOM所有事件，进行记录，然后在回放区域回放出来。

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

点击开始时，打开console，可以看到打印的每次记录的DOM数据

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

源码连接：

链接：https://pan.baidu.com/s/1BQ78hA8f3VHqaHuOTUgh6A
提取码：tpdb

一些注意事项

password类型的输入框在回放中，不显示，小黑点也不显示。
回放是以Iframe镶嵌其中。
录制和回放可以分开，如果作为监控功能，在WEB中把录制嵌入，数据传入后台保存，以后再导出数据进行回放。
IE好像有兼容问题，还没来得及试。
录制动画也没问题，项目中使用了可以。
回放的css文件里面看了下是针对鼠标样式，回放的Iframe样式有点偏差，样式应该是写在 rrweb-index.js 里面。

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

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

尊重成果，前人铺路：

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

1.head引用文件

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

3.script函数

页面是这样的，点击录制，开始监控DOM所有事件，进行记录，然后在回放区域回放出来。

点击开始时，打开console，可以看到打印的每次记录的DOM数据

源码连接：

一些注意事项

先写到这里。

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