作为前端开发者，Zui怕的莫过于上线后用户反馈的异常，却在本地找不到任何踪影。“现场抓包”“手动还原”往往耗时又费力，甚至会让人怀疑自己的代码到底写对了没有。

今天我们把目光投向一款近来热度不减的神器——，配合官方提供的 wot-starter 脚手架，kankan在 uni‑app 项目里实现远程调试究竟有多“爽”。Ru果你Yi经对传统的 vConsole、埋点或是 Chrome DevTools 的远程功Neng感到厌倦，那么这篇文章或许Neng给你打开新思路。

uni‑app Neng一次编译到微信小程序、支付宝、字节跳动以及 H5 等多端，但每个端的运行环境差异巨大。大多数调试工具要么只支持 Web，要么只Neng在特定小程序平台上使用；真正Neng跨平台、兼容 uni‑app 编译产物的方案寥寥无几。

geng糟糕的是hen多团队在本地使用 npm run dev:mp-weixin 调试时只Nengkan到模拟器里的日志；当代码跑进真机或者云端服务器后那些细微的网络请求、缓存状态甚至页面渲染顺序，dou可Neng出现偏差。

Ru果没有办法直接“kan见”真机上的行为，你只Neng靠猜测——这显然不是高效且可靠的排错方式。

实时抓取真机日志：无论是微信小程序还是 H5 页面douKe以把控制台信息推送到云端面板。

网络请求全链路追踪：每一次 API 调用dou会被记录，包括请求头、响应体以及耗时统计。

存储/缓存监控：本地 storage 与 sessionStorage 的读写情况一目了然。

跨平台统一视图：同一个后台面板即可同时查kan多端数据，省去切换工具的麻烦。

这些特性让它成为唯一Neng够兼容「Web + 小程序 + 鸿蒙」三大生态的调试神器，也正因如此，它在 uni‑app 场景下格外抢眼。

docker run -d \
  --restart=always \
  -v $/log:/app/log \
  -v $/data:/app/data \
  -p 8080:80 \
  --name page-spy \
  ghcr.io/huolalatech/page-spy-web:latest

容器启动后用浏览器访问 http://localhost:8080 就Nengkan到 PageSpy 的登录页。默认账号密码请参考官方文档或自行在容器内部创建。

pnpm add @huolala-tech/page-spy-uniapp@latest
# 或者 npm i @huolala-tech/page-spy-uniapp

温馨提醒：Ru果你的项目使用的是 Yarn，请改成相应指令，以免出现锁文件冲突。

下面是一段经过重新组织后的示例代码，仅供参考。注意将占位符替换成自己部署好的 PageSpy 地址。

// 引入核心类
import PageSpy from '@huolala-tech/page-spy-uniapp'
import { createSSRApp } from 'vue'
import App from './App.vue'
import router from './router'
import { createPinia } from 'pinia'
import 'uno.css'
// 实例化 SDK
const pageSpy = new PageSpy({
    api: '<你的 PageSpy 地址>',   // 必填：指向部署好的服务入口
    enableSSL: false,            // 如需 HTTPS 可改为 true 并配置证书
    // geng多配置项请查阅官方文档
})
// Pinia 持久化插件
const pinia = createPinia
pinia.use
// 创建并返回 app 实例
export function createApp {
    const app = createSSRApp
    // 将实例挂载到全局，以便业务代码随时调用
    app.config.globalProperties.$pageSpy = pageSpy
    app.use
    app.use
    return { app }
}

执行下面的命令即可进入微信小程序开发模式：

pnpm dev:mp-weixin   # 或者 npm run dev:mp-weixin

编译完成后用微信开发者工具打开对应目录，在页面右上角会出现一个「开始调试」按钮。点一下即可把当前设备的数据实时推送到之前打开的 PageSpy 控制台。

A 某用户在低网速环境下点击「提交订单」，接口返回超时但页面却误显示成功。通过 PageSpy，我们立刻捕获到了该请求的响应码和延迟时间，从而定位是服务端超时未Zuo错误处理导致 UI 状态错乱。

C 项目中使用了 uni.setStorageSync 存储用户偏好，但升级后发现部分老用户仍然拿不到Zui新配置。PageSpy 的「Storage」面板展示了每一次 set/get 操作，让我们快速发现旧版缓存键名拼写错误的问题所在。

D 团队同时发布 H5 与微信小程序，同一套页面在两端表现不一致。借助 PageSpy 同时打开两个终端窗口，对比「Network」和「Console」日志，仅几分钟就找出了因为 CSS 前缀导致的小程序渲染失效点。

#1 开启 SSL 时记得同步geng新 API 地址，否则会出现跨域报错。

#2 Docker 容器内日志目录Zui好映射到宿主机，这样即使容器重启也不会丢失历史记录。

#3 Ru果使用自定义域名，请提前在微信公众平台完成域名校验，否则无法正常连接调试服务。

#4 在生产环境中务必关闭 enableSSL:false 或者对外隐藏 debug 按钮，以免泄露敏感信息。

#5 使用 Pinia 持久化插件时需要把 $pageSpy 放在全局属性上，否则热geng新可Neng导致实例失效。

回顾整个流程，从 Docker 部署，到 SDK 集成，再到真机实时监控，每一步dou相对简单，却极大提升了定位线上问题的效率。Ru果你曾经因为「本地复现不了」而焦头烂额，那么现在Ke以大胆尝试把页面日志推送至云端，让团队成员随时查kanZui新状态。

别忘了给 PageSpy 项目点个星星 ⭐️，给 wot-starter 点个赞 👍，一起让geng多人受益！Ru果还有其他疑问或想分享自己的实践经验，欢迎在评论区畅所欲言👇👇👇 。祝大家编码顺利，bug 无处遁形！🚀🚀🚀