2024 年的 PageSpy:走向多端,不止调试

2023 年底时,Github PageSpy 主仓库 star 数突破 3000。当然我们不会止步于此。在 2024 年,我们结合前端的使用场景又推出了两个大的功能:

  • 走向多端:支持小程序调试
  • 不止调试:日志回放 (Session Replay)

PageSpy 不仅可以解决各平台调试的困扰,还可以有效推动测试与前端的高效协同。

走向多端:支持小程序调试

小程序开发作为前端的一个重要组成部分,因此 PageSpy 提供了对 微信小程序支付宝小程序 以及 uniapp 框架的支持,有效地弥补了当前开源小程序调试工具的空白。

与 web 版 PageSpy 的使用方式相同,用户如果已经部署了 PageSpy 后端服务,那么只需要在项目中引入相应的小程序 SDK 并进行初始化,即可以使用。

名称 说明
@huolala-tech/page-spy-wechat 微信小程序
@huolala-tech/page-spy-alipay 支付宝小程序
@huolala-tech/page-spy-uniapp UniApp

还未在服务器部署 PageSpy,参考这里 github.com/HuolalaTech...

三种 SDK 的初始化方式是一样的:

typescript 复制代码
// 先安装依赖 npm install @huolala-tech/page-spy-uniapp
import PageSpy from '@huolala-tech/page-spy-uniapp'

const pageSpy = new PageSpy(config?: InitConfig)

接下来,开发者就可以在远端调试面板来愉快地进行小程序调试。

多端的实现原理

PageSpy 原理揭秘一文中,提到 PageSpy 会劫持宿主环境的相应 API 从而实现调试。在多端的场景下,不同平台的 API 不尽相同。为了尽可能地抹平各小程序平台的差异,需要对劫持 API 类别再进行一层的抽象,这样下次如果支持了新的小程序平台,那么开发的代码量会大大减少。mp-base 正是对多端的能力的抽象。开发某一特定小程序的 SDK 时,引入该包做必要的初始化即可。

typescript 复制代码
// https://github.com/HuolalaTech/page-spy/blob/main/packages/page-spy-alipay/src/index.ts
import { setMPSDK, utilAPI } from 'mp-base/src/utils';

// ...
setMPSDK(my);
utilAPI.getStorage = (key: string) => {
  const res = my.getStorageSync({ key });
  if (res.success) {
    return res.data;
  }
  return undefined;
};

不止调试:日志回放 (Session Replay)

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

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

为了解决实际过程中的这些问题,我们便推出了日志回放功能。用户在浏览网页过程中发起的网络请求,页面中的 console 等信息都会被记录下来。当测试人员在测试页面时发现了问题,点击按钮导出数据。然后再将日志文件转发给前端开发。前端开发收到日志文件使用 PageSpy 平台进行日志回放、排查问题。

开发者如果想使用该功能,除了引入 SDK 外,还要引入额外的插件。

html 复制代码
<script src="https://<your-host>/page-spy/index.min.js"></script>
<!-- 引入插件 -->
<script src="https://<your-host>/plugin/data-harbor/index.min.js"></script>
<script>
  // 注册插件
  PageSpy.registerPlugin(new DataHarborPlugin(config));

  window.$pageSpy = new PageSpy();
</script>

如果还需要记录客户端的操作轨迹,还要再引入 page-spy-plugin-rrweb 插件。

做完上述操作后,点击 PageSpy 图标展示的弹窗里会有 "下载日志数据" 的按钮,点击后会自动下载以日期时间格式命名的 json 文件。

将日志文件上传到调试面板,开发者拖动播放条就能浏某一时段的用户行为。复现 bug 所需要的上下文信息是非常完备的。

看完 PageSpy 最近两次大更新,你是不是已经打算在项目中应用它了呢?希望 PageSpy 这款工具给你的前端开发工作带来效能的提升。如果你觉得它好用的话,不妨去 Github 给 PageSpy 点个 star。

相关推荐
非凡ghost16 分钟前
Typora(跨平台MarkDown编辑器) v1.12.2 中文绿色版
前端·windows·智能手机·编辑器·软件需求
馨谙32 分钟前
/dev/null 是什么,有什么用途?
前端·chrome
默默coding的程序猿37 分钟前
3.git的分支携带问题是什么?怎么解决?
java·git·python·svn·gitee·github·intellij-idea
JamSlade1 小时前
流式响应 sse 系统全流程 react + fastapi为例子
前端·react.js·fastapi
徐同保1 小时前
react useState ts定义类型
前端·react.js·前端框架
liangshanbo12152 小时前
React 19 vs React 18全面对比
前端·javascript·react.js
望获linux2 小时前
【实时Linux实战系列】Linux 内核的实时组调度(Real-Time Group Scheduling)
java·linux·服务器·前端·数据库·人工智能·深度学习
Never_Satisfied2 小时前
在 JavaScript 中,删除数组中内容为xxx的元素
java·前端·javascript
_菜鸟果果2 小时前
Vue3+echarts 3d饼图
前端·javascript·echarts
Luffe船长3 小时前
前端vue2+js+springboot实现excle导入优化
前端·javascript·spring boot