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。