文章摘要：PageSpy 是货拉拉技术团队开源的一款远程调试工具，本文主要介绍该工具基本原理和内网部署使用过程
引子
在开发调试移动端、H5 时，可能很多同学都用过类似 vconsole、eruda、weinre等移动端的调试工具，可以在移动设备上查看elments、console、network等信息；或者电脑连接手机通过chrome inspect 页面远程调试。对于一些远程工作的场景，需要排查测试同学或用户就不是那么容易了，此时 PageSpy 就能派上用场。
何时使用？
任何无法在本地使用控制台调试的场景，都是 PageSpy 可以大显身手的时候！一起来看下面的例子：
- 本地调试 H5、Webview 应用：以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题；
- 远程办公、跨地区协同：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；
- 用户终端上出现白屏问题：传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现；
此类问题的共同点是开发者无法像使用控制台一样查看运行信息。
对此 PageSpy 提供项目运行现场供技术人员在调试端查看，在远程协同场景中，测试人员不用再频繁的通过文字、截图、语音、录屏等方式向技术人员提供故障信息。
功能演示
通过 Title 标识用户 id，展示当前连接用户。
展示console 输出实时日志
展示实时的网络请求
甚至支持展示当前调试用户的页面和元素，不过这里是通过将用户侧的 document.documentElement.outerHTML 传输到调试端展示，因此并未绑定任何事件，也没有js执行。
用户侧的localstorage信息展示，实际场景经常会遇到用户侧存在错误缓存数据导致的bug，这样排查起来会方便很多。
核心原理
sdk 支持以插件的形式拦截端上的日志输出、storage 变更等，通过 websocket 传输给调试端消费，其中提供的几种插件能力如下：
- 拦截 console
- 拦截 network
- 拦截 storage 和 db 变更
- 传输当前页面的 outerHTML
借助于这种插件的形式，因此sdk 也能方便支持小程序、rn之类的场景。
内部部署&接入
官方默认提供了docker 和 npm 包两种接入形式，对于内网通过流水线编译、容器云部署方式，新建一个 仓库，以npm的方式接入看起来更合适，后续基于源码做二次开发也比较方便。
PageSpy 的接口是用go 开发的，将 go 编译后的产物作为 npm 包发布。安装 @huolala-tech/page-spy-api，通过 page-spy-api 启动的过程是找到当前系统支持的go 编译产物并执行。项目内提供常规的 build.sh、start.sh 即可，nginx.conf 代理支持 ws 协议。
由于 PageSpy 本身不提供权限管控，而调试后台会暴露用户的cookie 等敏感信息，因此可以使用公司内部的网关来设置访问策略控制。
location: /api|page-spy 为提供服务的地址，不包含敏感信息，无需认证；
location: / 为调试后台地址，可以限制组内同学访问。
由于 PageSpy SDK 本身拦截了大量的操作，并对数据做了上传，理论上会对用户的性能有一定影响 。因此端上可以通过动态开关控制 PageSpy SDK 启用状态。
总结
传统的日志、监控等系统已经能较好的监控用户的性能、稳定性，而在实际业务中也常常遇到需要保留环境来解决的问题，PageSpy 较好解决此类需求。类似 hourglass 这类基于web DOM的录屏工具，但相对入侵会更大一些，在一些涉及到微前端沙箱的场景会有一些兼容问题存在。PageSpy 入侵相对较小，在远程调试中的场景推荐使用。
