做过小程序的人都知道，小程序的开发体验很糟糕，其中一个很难受的点就是调试。虽然在电脑上开发可以用调试工具，但众所周知很多问题得到真机上才能暴露出来，而小程序真机调试用的 vconsole 又很鸡肋，屏幕小，输入难，还是阉割版（阉割了网络、存储功能，不知道出于什么考虑）。另一个缺陷是，无论是开发工具还是 vconsole ，你都只能在「本机」上运行，测试同学要是离你很远的话，想喊你看个 bug ，只能截图。
今天介绍一个神奇的工具，全方位的提升小程序的调试体验。
PageSpy 简介
github：https://github.com/HuolalaTech/page-spy-web
PageSpy 是由货拉拉大前端开源的一款用于远程调试 Web 的工具，它可以针对远程页面提供类似 Chrome DevTools 的调试体验，无论网页实际运行在哪里。除了实时调试，它还支持离线录制，将已经发生的用户操作和历史日志录制下来随时回放。
除了 web 平台，它还把同样的调试功能带到了小程序上。我们来看看使用 PageSpy 调试小程序有什么不一样的体验。
部署和接入
PageSpy 分为服务端、调试端网页和客户端 SDK ，官方文档有详细的部署和接入说明，这里不再赘述：
部署指南：https://www.pagespy.org/#/docs/deploy-guide
小程序的 SDK 以 npm 包的方式提供：
import PageSpy from '@huolala-tech/page-spy-wechat';
const $pageSpy = new PageSpy({
api: "<your-pagespy-host>",
})
详细参考：https://www.pagespy.org/#/docs/miniprogram
在线调试
针对小程序，目前 PageSpy 内置了四个模块：输出，网络，存储，系统。
1. 输出
1. 大屏看日志
比手机小屏上的 vconsole 爽多了，而且不受设备限制，无论小程序运行在什么设备上，都能通过调试端网页远程看到运行情况。
2. 远程执行代码
vconsole 输入很难受，而 PC 键盘输入的效率就很高，PageSpy 打破了小程序无法执行远程代码的限制。这一功能需要安装插件 @huolala-tech/page-spy-plugin-mp-eval 来支持。不过需要注意上线的时候要去掉，小程序对远程执行代码审查很严格，把该插件带到线上去的话很可能审核不通过。
3. 运行上下文
PageSpy 的远程执行代码和你自己写的代码运行在 「同一个上下文」。这有什么意义呢？
你可以自己试一下：
例如你在你的代码里为全局变量加一个字段：wx.a = 123，在 vconsole 里，你是获取不到这个变量的，反之亦然。
甚至 getCurrentPages 和 getApp 也不能用：
冷知识：小程序的 vconsole 和你的代码 不在一个上下文！
vconsole 是把用户环境的日志通过代理打印到了自己的上下文，又把 wx.xxx 之类的 api 代理到用户上下文去执行。微信似乎只想把它当成一个查看日志的窗口，而不希望用户利用它随意执行代码。
PageSpy 就不会有这个问题，它和你的代码运行在同一个上下文空间，可以直接和你的代码进行交互。
2. 网络
微信小程序自带的 vconsole 阉割了网络模块，所以在真机调试时看不到网络请求日志，非常的不方便。
来看 PageSpy 的网络面板：
和 Chrome 很像。通过 wx.request 发起的请求都可以记录到，而图片、字体之类的资源类请求还看不到，目前来说已经能带来很大帮助了。
3. 存储
小程序的 vconsole 同样也没有 storage 面板🤦🏻，只提供了一个清除 storage 的按钮，令人费解。
来看 PageSpy 的存储面板：
PageSpy 的 web 版 SDK 有 localStorage ，sessionStorage ，cookie ，indexedDB 等多种存储方式，小程序原生只有一个 storage 。不过未来倒是可能支持小程序的「本地临时文件」。
4. 系统
系统面板就是把你调用 wx.getSystemInfo 、wx.getSetting 等系统 API 能获取到的信息，在这里更清晰、直观的列了出来。例如用户说他某个功能不起效，你看一下这里，可能就知道是不是因为他的系统版本过低，或者某个权限没开导致的。
用户授权信息：
5. 页面呢 ？？
如果你用过 web 版的 PageSpy ，会发现小程序版的比 web 版的少了一个「页面」模块。因为小程序本身的限制，没有办法拿到页面的 dom 结构，也就没法像 web 一样远程调试界面，这是目前唯一输给 vconsole 的点。也许未来发明了什么黑科技，或者官方良心发现放出一些接口，这个功能才得以实现。
离线录制
PageSpy 不仅支持实时调试，还支持离线录制。假如你在调试小程序的时候发现了一个问题而恰巧又没有连上实时调试，或者你想把某次操作记录存下来慢慢研究或者分享给其他人，就可以用到这个功能。
首先安装插件 @huolala-tech/page-spy-plugin-mp-data-harbor
import PageSpy from '@huolala-tech/page-spy-wechat';
// 引入离线录制插件
import DataHarborPlugin from '@huolala-tech/page-spy-plugin-mp-data-harbor';
// 注册插件
const harbor = new DataHarborPlugin(config);
PageSpy.registerPlugin(harbor);
// 实例化 pageSpy
const $pageSpy = new PageSpy();
添加了该插件之后，小程序的一切日志就会被离线的记录在内存中，之后你可以在需要的时候，调用 $pageSpy.showPanel()方法呼出一个弹窗，就可以将刚刚记录的日志传到 PageSpy 后台：
在 PageSpy 的调试端，进入「日志回放」页面，就可以看到刚刚上传的日志：
兼容性
小程序有那么多平台，每家都有差异，PageSpy 都支持吗？
是的，PageSpy 目前支持绝大部分市面上的小程序类型：微信、支付宝、抖音、百度、mpaas... 官方给出了 4 个小程序平台的包：
如果是用原生框架写的小程序，目前官方针对使用量较大的微信和支付宝提供了专门的原生 SDK：
@huolala-tech/page-spy-wechat
@huolala-tech/page-spy-alipay
如今很多小程序使用的是 uniapp 或 taro 之类的跨端框架，官方也提供了相应的 SDK：
@huolala-tech/page-spy-uniapp
@huolala-tech/page-spy-taro
如果你要开发抖音、百度、钉钉之类的冷门平台小程序，只要 uniapp 或者 taro 支持，那就可以用上 PageSpy 。
除此之外，uniapp 编译的原生 APP ，React Native ，甚至鸿蒙应用，它都支持，全平台制霸了属于是。
扩展性
插件系统
前文提到的很多功能都依赖于插件，实际上 PageSpy 的所有功能模块都是通过插件实现的，输出、网络、存储、系统这些是内置插件，不需额外配置，而远程执行代码、离线日志是可选的插件。
除此之外你还可以开发自定义的插件，PageSpy 的核心功能是在客户端和调试端之间建立了一个双向的消息通道，通过自定义插件，你可以利用这条通道做你想做的任何事情。例如观测埋点上报，远程执行指令，甚至通过它远程聊天，发送语音视频消息，也不是不可能。
插件文档：
https://www.pagespy.org/#/docs/plugins
开源贡献
最后，不要忘了 PageSpy 是个开源软件，通过插件实现不了的，还可以贡献代码：
目前尚无回复
Select Language