uni-app 也能远程调试？使用 PageSpy 打开调试的新大门！

大家好，我是不如摸鱼去，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 开发体验起飞

uni-app 还在手写请求？alova 帮你全搞定！

uni-app 无法实现全局 Toast？这个方法做到了！

Vue3 uni-app 主包 2 MB 危机？1 个插件 10 分钟瘦身

欢迎评论区沟通、讨论👇👇