一、开源项目简介
PageSpy 是一款用来调试远程 Web 项目的工具。它是对原生 API 的封装,把调用原生方法时的参数进行过滤、转化,整理成统一的消息数据,推送给调试端,调试端收到消息数据,在页面上将数据呈现出来。最重要的是报错时支持定位到源码!
PageSpy 整合了SDK、server、调试端三者。客户端集成 SDK ,SDK 收集数据发到调试端,开发人员在调试端和故障信息直接面对面。
二、软件使用场景
跨地区合作时,测试人员不用频繁的通过文字、截图、录屏等方式向开发人员提供故障信息。
在生产环境中出现任何问题,比如白屏、卡顿、转圈,PageSpy 可以把错误信息直接呈现给开发人员,不需要通过传统的数据监控、日志分析定位问题,大大提升工作效率。
三、系统功能
Console 面板
可以显示console的各种日志,同时还可以发送调试代码
Page 面板
显示当前页面元素:
Storage 面板
查看页面缓存的数据:
四、程序应用
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 后,可以在房间列表,看到如下的页面:
PageSpy 基本还原了控制台排障的流程:
-
程序报错时可以查看错误堆栈
-
报错时支持定位源码
-
查看查看请求参数和响应数据