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

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

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

    
这里模拟一些html代码：
    用户名
    密码
    邮箱
    备注



模拟背景颜色，用来检验录屏画质







    
视频回放
    


点击录制
点击播放

3.script函数

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

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

 源码连接：

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

---

一些注意事项

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

先写到这里。