How PageSpy Extends Frontend Debugging to Mini‑Programs and Adds Session Replay

At the end of 2023 the GitHub PageSpy repository surpassed 3000 stars, and in 2024 the team released two major features: multi‑platform mini‑program debugging and a session‑replay (log playback) capability.

Multi‑platform support: Mini‑program debugging

Mini‑program development is a key part of frontend work, so PageSpy now supports WeChat Mini‑Program, Alipay Mini‑Program and the uniapp framework, filling a gap in open‑source debugging tools.

The usage mirrors the web version; after deploying the PageSpy backend service, developers simply import the appropriate mini‑program SDK and initialize it.

@huolala-tech/page-spy-wechat – WeChat Mini‑Program SDK

@huolala-tech/page-spy-alipay – Alipay Mini‑Program SDK

@huolala-tech/page-spy-uniapp – UniApp SDK

// Install the dependency
npm install @huolala-tech/page-spy-uniapp
import PageSpy from '@huolala-tech/page-spy-uniapp'

const pageSpy = new PageSpy(config?: InitConfig)

Developers can then use the remote debugging panel to debug mini‑programs.

Implementation principle

PageSpy intercepts host environment APIs to enable debugging. Because API sets differ across mini‑program platforms, an additional abstraction layer (mp‑base) unifies them, reducing future integration effort for new platforms.

// Example from the Alipay SDK
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;
};

Beyond debugging: Session Replay

Previously PageSpy required the client and debugging side to be online simultaneously, limiting its use. The new session‑replay feature records network requests, console output, and other logs during a browsing session. Testers can export the log as a JSON file and share it with developers, who replay the logs in the PageSpy platform to investigate issues.

To enable this, developers must add the core SDK plus the data‑harbor plugin, and optionally the rrweb plugin for recording user interactions.

<script src="https://<your-host>/page-spy/index.min.js"></script>
<!-- Include plugin -->
<script src="https://<your-host>/plugin/data-harbor/index.min.js"></script>
<script>
  // Register plugin
  PageSpy.registerPlugin(new DataHarborPlugin(config));
  window.$pageSpy = new PageSpy();
</script>

After setup, the PageSpy UI shows a “Download Log Data” button that saves a timestamped JSON file.

Uploading the log to the debugging panel lets developers scrub through the timeline, reproducing the exact user actions and context needed to pinpoint bugs.

After reviewing the two major updates, you might consider integrating PageSpy into your projects to boost frontend efficiency. If you find it useful, feel free to star the repository on GitHub.

Reference Links

[1]

PageSpy main repository: https://github.com/HuolalaTech/page-spy-web [2] mp‑base: https://github.com/HuolalaTech/page-spy/tree/main/packages/mp-base/src [3] page‑spy‑plugin‑rrweb: https://github.com/HuolalaTech/page-spy/blob/main/packages/page-spy-plugin-rrweb/README_ZH.md [4] GitHub: https://github.com/HuolalaTech/page-spy-web