PageSpy 是由货拉拉大前端团队开发的开源远程调试工具，支持 Web、小程序、React Native 和鸿蒙 APP 等平台。它通过 SDK 收集客户端运行数据，并推送到调试端，提供类似 Chrome 控制台的交互界面，帮助开发者远程调试线上问题。

核心功能

1. 实时调试
   可查看客户端控制台日志、网络请求、本地存储（LocalStorage/SessionStorage/Cookie）、页面元素（DOM 结构）等数据；
2. 日志回放
   支持异步回放客户端操作日志（目前仅限 Web 端）；
3. 多平台兼容
   适配 Web、小程序、React Native、鸿蒙 APP 等场景；
4. 源码定位
   报错时可直接定位到源码位置。

使用步骤

1. 部署服务端

Node 部署

# 使用 yarn
yarn global add @huolala-tech/page-spy-api
# 使用 npm
npm install -g @huolala-tech/page-spy-api
# 启动服务
page-spy-api

Docker 部署

docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

启动后访问 http://<服务器IP>:6752 进入调试端。

2. 客户端集成

在 HTML 中引入 SDK：

<script crossorigin="anonymous" src="http://<服务器IP>:6752/page-spy/index.min.js"></script>
<script>
  new PageSpy({
    title: '调试会话标识',  // 房间列表显示名称
    project: '项目标识',   // 按项目分类调试数据
    autoRender: false      // 可选：隐藏调试按钮
  });
</script>

3. 开始调试

• 实时调试：客户端访问页面后，在调试端“房间列表”中选择设备，即可实时查看日志、网络请求等信息；
• 日志回放：客户端触发问题后上传日志，开发者可通过回放功能异步分析。

应用场景

• 线上偶发问题：客户复现 Bug 时动态加载 SDK，开发者远程查看实时数据；
• 跨地域协作：替代传统截图/录屏沟通，直接获取完整调试信息；
• 生产环境排查：快速定位白屏、接口异常等问题，无需依赖日志监控。

更多文档可参考：PageSpy 官方文档。