前端调试神器-PageSpy（日志信息、页面查看、网络请求、录屏回放等）

什么是 PageSpy？

PageSpy 是一款兼容 Web / 小程序 / React Native / 鸿蒙 App 等平台项目的开源调试平台。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成一定格式的消息供调试端消费；调试端收到消息数据后，提供类似本地控制台的功能界面将数据呈现出来。

为什么是PageSpy？

PageSpy 的核心优势

PageSpy 由三部分组成：

1. PageSpy Web 调试端：由开发者使用，一个类似 Chrome 控制台的、交互友好的、实时同步数据的前端界面。
2. PageSpy API 服务端：调试端和 SDK 的“中间人”，负责中转两端之间的通信消息。
3. 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 可以快速定位生产环境中的问题，从根本上解决问题。

参考

PageSpy: huolalatech.github.io

官方文档: github.com