利用现代浏览器所提供的强大 API 录制，回放并保存任意 web 界面中的用户操作

栏目: jQuery · 发布时间: 5年前

内容简介：在开发测试阶段作为开发人员你永远不知道你的测试和产品有什么沙雕操作，他们只会说xxx页面/功能有bug。想要复现也很难。前段时间正好看到了rrweb这个项目，索性基于它实现了定时间隔录制、主动上报、存入数据库、统一查看等功能，可以再项目开发时引入，再也不怕bug复现了。实测在

在开发测试阶段作为开发人员你永远不知道你的测试和产品有什么沙雕操作，他们只会说xxx页面/功能有bug。想要复现也很难。前段时间正好看到了rrweb这个项目，索性基于它实现了定时间隔录制、主动上报、存入数据库、统一查看等功能，可以再项目开发时引入，再也不怕bug复现了。

走过路过先来波start

项目地址

利用现代浏览器所提供的强大 API 录制，回放并保存任意 web 界面中的用户操作

实测在 windows 下安装最新的 MySQL8.0 会报错，重置密码也不行，原因不明，解决办法是安装 MySQL 5.7.25。 MAC OS 下安装最新版没有问题。

:sparkles: 特性

录制并回放任意 web 界面中的用户操作前端封装+后端。
开箱即用。
支持跨域。

支持环境

Linux , MacOS , Windows 。
现代浏览器和 IE11及以上。
Electron

:minidisc: 后端架构

基于 NodeJS
数据库使用MySQL
服务框架使用express4

:computer: 前端架构

录制基于 rrweb
http 请求默认依赖axios可配置为jQuery以及任何与 jQuery 结构相同的库
回放页面前端框架使用VUE
UI 框架使用Element
回放基于 rrewb-player

:package: 安装

安装MySQL并配置 ./server/mysql.config 里的端口号及用户密码
安装 NodeJS
进入项目目录
安装依赖
```
npm i #国内使用cnpm
复制代码
```
启动项目
```
node server
复制代码
```

operationRecord.js参数

const record=new Record({
    url: '/operationRecord/add',//后台服务器url，如未修改服务器文件，应为：服务端ip+/operationRecord/add
    name: '不知名的测试人员',//提交人，会显示在统计页面。默认：unknow
    projectName: 'test',//需要连接的表名
    ajaxFn:$,//ajax 提交函数，默认依赖axios，如果项目中使用的是jquery直接写$,可以使用人和和jquery结构一致的ajax库
    msg:'你这东西有bug啊',//提交bug信息，最多255
    isReport:'1',//是否认为上报，1：是，0：否。默认：0
    interval:'2000',//提交间隔，默认10秒，单位ms
    success: function (res) {
        console.log(`成功的回调${res}`);
    },
    error: function (err) {
        console.log(`失败的回调${err}`);
    }
});
//方法
record.destroy(); //销毁
console.log(record) //查看属性
复制代码

:hammer: 示例

<!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>test</title>
    </head>

    <body>
        <h1>test</h1>
        <input type="text">
        <button>测试</button>
        <button>回放</button>
        <script src="./js/axios.min.js"></script>
        <script src="./js/operationRecord.js"></script>
        <script>
            let a = new Record({
                url: 'ip地址+/operationRecord/add',
                name: 'liu',
                projectName: 'testProject',
                msg:'测试信息',
                interval:20000,
                success: function (res) {
                    console.log(res);
                }
            });
        </script>
    </body>

</html>
复制代码

打开 http://localhost:9527/ 查看结果

:book: 目录结构

├── .git								
├── .gitignore
├── README.md
├── datas								// 录制数据储存目录
├── node_modules
├── package.json
├── public								// 静态文件目录
├── ├── .DS_Store
├── ├── css								// css文件
├── ├── ├── element.min.css
├── ├── ├── fonts						// 字体文件
├── ├── ├── ├── element-icons.ttf
├── ├── ├── ├── element-icons.woff
├── ├── ├── player.min.css
├── ├── ├── reset.min.css
├── ├── ├── style.css					// 自定义样式
├── ├── index.html
├── ├── js								// js文件
├── ├── ├── axios.min.js
├── ├── ├── element.min.js
├── ├── ├── operationRecord.js
├── ├── ├── player.min.js
├── ├── ├── replay.js
├── ├── ├── vue.js
├── ├── replayer.html
├── readme.js
├── server								// 服务器文件
├── ├── local-zh.config					// 表名中英文对应
├── ├── mysql.config					// mysql配置文件
├── ├── mysql.js						// mysql操作
├── server.js							// server
复制代码

以上所述就是小编给大家介绍的《利用现代浏览器所提供的强大 API 录制，回放并保存任意 web 界面中的用户操作》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Linux内核设计与实现

拉芙 / 陈莉君、唐华、张波 / 机械工业出版社 / 2006-1 / 38.00元

《Linux内核设计与实现》基于Linux2.6内核系列详细介绍Linux内核系统，覆盖了从核心内核系统的应用到内核设计与实现等各方面的内容。主要内容包括：进程管理、系统调用、中断和中断处理程序、内核同步、时间管理、内存管理、地址空间、调试技术等。本书理论联系实践，既介绍理论也讨论具体应用，能够带领读者快速走进Linux内核世界，真正开发内核代码。本书适合作为高等院校操作系统课程的教材......一起来看看《Linux内核设计与实现》这本书的介绍吧!

码农工具

HTML 压缩/解压工具

在线压缩/解压 HTML 代码

XML、JSON 在线转换

在线XML、JSON转换工具