什么是 PageSpy？
PageSpy 是一款兼容 Web / 小程序 / React Native / 鸿蒙 App 等平台项目的开源调试平台。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成一定格式的消息供调试端消费；调试端收到消息数据后，提供类似本地控制台的功能界面将数据呈现出来。
为什么是PageSpy？
PageSpy 的核心优势
PageSpy 由三部分组成：
- PageSpy Web 调试端：由开发者使用，一个类似 Chrome 控制台的、交互友好的、实时同步数据的前端界面。
- PageSpy API 服务端：调试端和 SDK 的“中间人”，负责中转两端之间的通信消息。
- PageSpy 平台 SDK：由开发者在业务项目中集成，集成后即可收集客户端的运行信息，通过服务端将消息转发到调试端，开发者即可对项目的运行状况一目了然。
通过这三部分的有机结合，PageSpy 提供了一键使用的支持，开发者无需关心内部实现细节，即可直接上手集成。
何时使用？
任何无法在本地使用控制台调试的场景，都是 PageSpy 可以大显身手的时候！ 一起来看下面的几个场景案例：
- 本地调试 H5、Webview 应用：以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题；
- 远程办公、跨地区协同：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；
- 用户终端上出现白屏问题：传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现；
PageSpy 的目标，就是为包括以上场景的人员提供帮助。
开箱即用的 SDK 和 调试的客户端
1. inject.load-script
<script crossorigin="anonymous" src="https://{domain}/page-spy/index.min.js"></script>
2. Then, config (optional) and init
<script>
new PageSpy();
</script>
3. 以上就是全部。
同时支持私有化部署
Docker 部署
docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release
Node 部署
yarn global add @huolala-tech/page-spy-api
安装后直接执行 page-spy-api 启动服务。
集成到项目
在项目中配置：
<script crossorigin="anonymous" src="http://ip:6752/page-spy/index.min.js"></script>
ip 是部署 PageSpy 的服务器地址。
项目接入PageSpy 后，可以在页面列表，看到如下的页面：
功能介绍
Console 面板
可以显示console的各种日志，同时还可以发送调试代码到客户端执行；
Page 面板
显示当前页面元素：
Storage 面板
查看页面缓存的数据：
网络 面板
查看页面网络请求
总结
总体而言，PageSpy 是一款在网页开发具有一定价值的工具，可以帮助开发和测试人员更好地调试和优化网页。 PageSpy 可以减少开发和测试人员的，有些生产环境可能无法复现，PageSpy 可以快速定位生产环境中的问题，从根本上解决问题。
