PageSpy 是一款兼容 Web / 小程序 / React Native / 鸿蒙 App 等平台项目的开源调试平台。基于对原生 API 的封装,它将调用原生方法时的参数进行过滤、转化,整理成一定格式的消息供调试端消费;调试端收到消息数据后,提供类似本地控制台的功能界面将数据呈现出来。
PageSpy 由三部分组成:
通过这三部分的有机结合,PageSpy 提供了一键使用的支持,开发者无需关心内部实现细节,即可直接上手集成。
任何无法在本地使用控制台调试的场景,都是 PageSpy 可以大显身手的时候! 一起来看下面的几个场景案例:
PageSpy 的目标,就是为包括以上场景的人员提供帮助。
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的各种日志,同时还可以发送调试代码到客户端执行;
显示当前页面元素:
查看页面缓存的数据:
查看页面网络请求
总体而言,PageSpy 是一款在网页开发具有一定价值的工具,可以帮助开发和测试人员更好地调试和优化网页。
PageSpy 可以减少开发和测试人员的,有些生产环境可能无法复现,PageSpy 可以快速定位生产环境中的问题,从根本上解决问题。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。