大家好，我是不如摸鱼去，wot-ui 的"主理人"，欢迎来到我的 uni-app 分享专栏。
如果你是一个前端开发，我想你肯定经历过测试、项目验收时报障，本地却无法复现的情况，又或者本地无法满足复现环境的情况。这时候的你是不是抓耳挠腮不知所措？
等到测试反馈，流程慢如闪电？
当然，解决方案肯定是有的，埋点、vConsole 以及远程调试工具可以帮我们解决这一问题，本文将会使用 PageSpy 结合 uni-app 模板 wot-starter 实践 uni-app 的远程调试。
为什么要远程调试？
以下内容来自 PageSpy 官网，我认为非常有道理。
任何无法在本地使用控制台调试的场景，都是 PageSpy 可以大显身手的时候！ 一起来看下面的几个场景案例：
- 本地调试 H5、Webview 应用：移动端屏幕太小，传统调试面板操作不便、显示不友好，且容易出现信息截断；
- 远程办公、跨地区协同：传统沟通方式（邮件、电话、视频会议）效率低，故障信息不完整，容易误解误判；
- 用户终端白屏问题排查：数据监控、日志分析等传统方式依赖排障人员对业务和技术的深入理解，定位效率低；
PageSpy 是什么？
PageSpy 是一款用来调试 Web / ReactNative / 小程序 / 鸿蒙 APP 等平台项目的工具。支持 Web 的远程调试工具不少，但能支持 uni-app 的调试工具真的是凤毛麟角了。
PageSpy 如何使用？
部署
部署文档见部署说明：https://www.pagespy.org/#/docs/deploy-guide，这里我们选择使用 Docker 部署（正好买了个轻量级服务器没用）：
sh
docker run -d --restart=always -v ./log:/app/log -v ./data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest执行完成后，打开浏览器访问 http://localhost:6752 即可访问服务。
使用
参见小程序快速上手文档：https://www.pagespy.org/#/docs/miniprogram
在 wot-starter 中安装 @huolala-tech/page-spy-uniapp
pnpm add @huolala-tech/page-spy-uniapp@latest在 main.ts 中引入 SDK 并实例化，可通过配置项 https://www.pagespy.org/#/docs/api 自定义 SDK 的行为：
ts
// 引入 SDK
import PageSpy from '@huolala-tech/page-spy-uniapp'
import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
import 'uno.css'
const $pageSpy = new PageSpy({
api: '<your-pagespy-host>', // 这里替换成你的 pagespy 地址
enableSSL: false, // 视情况开启
})
const pinia = createPinia()
pinia.use(persistPlugin)
export function createApp() {
const app = createSSRApp(App)
// 全局挂载
app.config.globalProperties.$pageSpy = $pageSpy
app.use(router)
app.use(pinia)
return {
app,
}
}执行 pnpm dev:mp-weixin后，我们打开部署的 PageSpy 点击开始调试就可以使用了！
我们可以看到有输出、网络、存储等内容。
总结
今天我们在 wot-starter 中简单尝试了下 PageSpy 的功能，其实 PageSpy 在 web 上有更强大的能力，不过我们主要关注它在小程序/uni-app 上的表现，更多能力大家可以自行探索了。还有大家可以多多关注 PageSpy 和 wot-starter 为他们点赞哦👍。
参考资料
PageSpy: https://www.pagespy.org/#/
wot-starter: https://starter.wot-ui.cn/
往期精彩
Trae SOLO 正式发布了？我用它将像老乡鸡那样做饭小程序开源了！
老乡鸡也开源？我用 Trae SOLO 做了个像老乡鸡那样做饭小程序！
当年偷偷玩小霸王，现在偷偷用 Trae Solo 复刻坦克大战
告别 HBuilderX，拥抱现代化！这个模板让 uni-app 开发体验起飞
Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身
欢迎评论区沟通、讨论👇👇