PageSpy使用介绍

2024/03/25
- 编程
0阅读

一、需求背景

在项目测试阶段，我们经常会遇到以下场景的问题：

测试人员反馈功能存在BUG，但无法提供准确的操作步骤。
测试人员遇到了在开发人员电脑上未复现的问题。
临时遇到了问题，但没有打开浏览器控制台，未记录到相关报错数据、请求等内容。

通常遇到这些问题的时候，需要开发人员、测试人员耗费大量精力时间反复去排查和复现问题，影响整体项目测试及修复进度。最近找到一款由货拉拉技术团队开源的远程调试工具—— PageSpy，其针对此类问题提供了完整的、开箱即用的解决方案。

PageSpy

二、技术原理

客户端SDK通过websocket持续向服务端发送网络请求、本地存储、控制台日志、DOM结构数据，经服务端处理后展示在服务端操作网页上。

三、部署规划

(1) 接入环境：经过初步的体验使用，我认为该软件有助于提升开发人员的排错效率、降低开发人员对测试同学的时间占用，在测试阶段能够提供较大帮助。
(2) 接入项目：该软件适用于任何基于PC、H5、小程序等设备平台的项目。个人认为特别适合H5、小程序项目，在真机环境中常常会遇到千奇百怪的错误，又不方便进行真机调试，接入该软件后会进一步降低调试门槛。

建议仅在内网环境搭建，涉及到远程调试功能不适合部署在公网服务上，容易产生数据泄露。

四、搭建部署

软件提供了两种部署方式：Docker部署和NodeJs部署。

（1）Docker部署

1	docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

（2）NodeJs部署

# 1. 安装程序
yarn global add @huolala-tech/page-spy-api@latest
# if you use npm
npm install -g @huolala-tech/page-spy-api@latest

# 2.启动程序
npm run start:server

五、基础使用：远程调试

（1）在项目中引用PageSpy

vue项目一般是在根目录中的index.html内添加（注意替换 yourdomain 为部署的IP地址）

<!-- 1. Load PageSpy -->
<script src="http://yourdomain:6752/page-spy/index.min.js"></script>
<!-- 2. Load the DataHarborPlugin plugin -->
<script src="http://yourdomain:6752/plugin/data-harbor/index.min.js"></script>
<!-- 3. Load the RRWebPlugin plugin -->
<script src="http://yourdomain:6752/plugin/rrweb/index.min.js"></script>
<!-- 4. Register plugin && Init PageSpy -->
<script>
    const config = {}
    const options = {}
    // 1. Register DataHarborPlugin plugin
    PageSpy.registerPlugin(new DataHarborPlugin(config));
    // 2. Register RRWebPlugin plugin
    PageSpy.registerPlugin(new RRWebPlugin(options));
    // 3. Init PageSpy
    window.$pageSpy = new PageSpy();
</script>

（2）启动项目或部署项目，然后打开页面

点击图标就会出现弹窗，Device ID就是对应客户端的设备码。

（3）打开PageSpy服务端页面

访问http://yourdomain:6752，点击右上方的『房间列表』。点击这个设备（88e2）的『调试』按钮。

（4）开始调试

在侧边栏中存在5个菜单，分别对应以下作用：

输出：对应客户端浏览器控制台（console）的输出内容，在底部可以输入并运行远程js命令（慎用！此功能会在客户端执行对应JS命令，并返回操作结果）
网络：对应客户端的网络请求面板（Network）的内容（注意：在客户端SDK初始化完成前触发的请求，不会在此处展示，ws、wss类请求也不会展示！）
页面：展示当前页面内容快照及元素DOM结构（此处仅参考元素即可，页面快照与实际效果存在一定区别！）
存储：展示Cookie及本地存储数据库（Application）的数据。
系统：展示客户端当前的浏览器兼容情况。

六、进阶使用：日志回放

除了基础的远程调试功能，PageSpy还集成了rrweb（reord and replay the web），一款开源的的JS屏幕录制库。通过它我们可以回放用户的操作行为及相应的网络请求、存储、控制台日志变化。这一进阶工具通过回放用户操作的方式，大幅降低问题复现的成本、帮助开发人员快速定位问题。使用也非常便捷。