打破边界， PageSpy 新增重磅功能

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

请不要在回答技术问题时复制粘贴 AI 生成的内容

这是一个创建于 623 天前的主题，其中的信息可能已经有所发展或是发生改变。

demo1.001.jpeg

前言

以往，PageSpy 在线调试解决了很多棘手的问题，但使用 PageSpy 有个前提条件：「客户端和调试端必须同时在线」。这个前置条件不仅局限了 PageSpy 的使用场景，比如：

针对一个问题要同时投入开发和测试两个人力；
调试期间客户端退到后台导致连接断开了；

同时也给 PageSpy 自身带来边边框框，比如：

要考虑收集的数据体积、网络传输的压力；

为了解决这些问题、使用时获得更大自由度，PageSpy 在1.7.3版本中提供了日志回放的功能！

日志回放

顾名思义是重新播放之前产生的日志。那么之前的日志从哪来？又该如何重新播放？我们一一来看。

在 PageSpy 的 SDK 支持注册插件后，开发团队第一时间推进DataHarborPlugin插件的研发。

DataHarborPlugin，数据港口插件

心智模型：PageSpy 产生的数据会源源不断的被送到 “数据港口”，在对数据进行打包、压缩后，“数据港口” 将数据整理存放在 “集装箱”（indexedDB或者内存）中，等待下一步指示。

DataHarborPlugin 在内部监听"public-data"事件（什么是public-data事件？），进而对 PageSpy 产生的数据进行整理、压缩，实现离线缓存数据的功能。同时在 SDK 渲染的控件中提供了下载按钮，当客户端发现问题时，测试同学可以直接点击按钮导出数据，这一创新打破了以往「客户端和调试端必须同时在线」的前提要求：

之前：

测试同学发现问题后同步 bug 信息给开发同学，在调试期间必须保持两端设备同时在线；
如果手机应用退到后台，很快 WebSocket 连接就会被系统自动断开，调试流程因此中断；

现在：

测试和开发两者的工作不再同步阻塞，测试同学发现问题后，点击按钮、导出日志文件转给开发同学，开发收到日志文件使用 PageSpy 平台进行日志回放、排查问题，测试同学就可以下线摸鱼去了～
数据都是缓存在客户端本地，减少了对大体积数据的顾虑和网络传输的压力，PageSpy 打碎之前的许多枷锁；

DataHarborPlugin默认将数据存储在indexedDB中，且不限制缓存数据的数量，这些行为都可在初始化插件时进行配置。更多详细信息请前往DataHarborPlugin主页查看。

如何使用日志回放

DataHarborPlugin 当前可用于客户端运行在浏览器环境中的场景。

第一步：客户端引入 SDK 和插件

<html> <head> <!-- 1. 加载 PageSpy --> <script src="https://<your-host>/page-spy/index.min.js"></script> <!-- 2. 加载 ”数据港口“ 插件 --> <script src="https://<your-host>/plugin/data-harbor/index.min.js"></script> <script> // 3. 注册 “数据港口” 插件 PageSpy.registerPlugin(new DataHarborPlugin(config)); // 4. 实例化 PageSpy window.$pageSpy = new PageSpy(); </script> </head> </html>

引入后，SDK 渲染的控件弹窗里会有 “下载日志数据” 的按钮，点击后会自动下载以日期时间格式命名的 json 文件：