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

前言

以往,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 复制代码
<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 文件:

同时可以打开浏览器控制台查看 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 仓库地址:github.com/HuolalaTech...

日志回放介绍:github.com/HuolalaTech...

相关推荐
sdgsdgdsgc1 小时前
Next.js企业级应用开发:SSR、ISR与性能监控方案
开发语言·前端·javascript
哲此一生9841 小时前
搭建Vue3工程(去除不必要的文件)
前端·javascript·vue.js
黑云压城After4 小时前
H5使用环信实现视频或语音通话
前端·javascript·vue.js
未来之窗软件服务6 小时前
自己写算法(九)网页数字动画函数——东方仙盟化神期
前端·javascript·算法·仙盟创梦ide·东方仙盟·东方仙盟算法
你的人类朋友6 小时前
什么是断言?
前端·后端·安全
FIN66687 小时前
昂瑞微:实现精准突破,攻坚射频“卡脖子”难题
前端·人工智能·安全·前端框架·信息与通信
椎4957 小时前
苍穹外卖前端nginx错误之一解决
运维·前端·nginx
@。1247 小时前
对于灰度发布(金丝雀发布)的了解
开发语言·前端
我有一棵树7 小时前
前端图片加载失败、 img 出现裂图的原因全解析
前端
FIN66687 小时前
昂瑞微冲刺科创板:硬科技与资本市场的双向奔赴
前端·人工智能·科技·前端框架·智能