共计 1704 个字符，预计需要花费 5 分钟才能阅读完成。
前言
以往，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 和插件
引入后，SDK 渲染的控件弹窗里会有“下载日志数据”的按钮，点击后会自动下载以日期时间格式命名的 json 文件：
同时可以打开浏览器控制台查看 Application - Storage - indexedDB 菜单下是否有 __PUBLIC__page-spy 的 database：
第二步：回放日志
进入调试端的房间列表页面，点击日志回放，选择客户端下载的 json 文件。
第三步
进入日志回放面板后，左侧显示客户端的操作轨迹（需要接入 @huolala-tech/page-spy-plugin-rrweb 插件），右侧显示客户端的运行时信息。
总结
PageSpy 在 1.7.3 版本中推出了日志回放的功能，使用前需要接入 DataHarborPlugin 插件，同时我们还可以录制用户的操作轨迹（需要接入 RRWebPlugin 插件）。日志回访的功能打破了以往调试的「客户端和调试端必须同时在线」前置性条件!
我们相信 PageSpy 的本次更新将有力的推动高效协同、远程调试继续往前迈出一大步！
最后希望大家能够帮助 PageSpy 在仓库中点个 Star，将 PageSpy 转发给身边的同事、朋友，感谢！
PageSpy 仓库地址：https://github.com/HuolalaTech/page-spy-web；
日志回放介绍：https://github.com/HuolalaTech/page-spy-web/wiki/ 日志回放；
