PageSpy 是一款功能强大的远程Web项目调试工具。它基于对原生API的封装,对调用原生方法时的参数进行过滤和转化,并整理成格式规范的消息,以供调试端消费。当调试端接收到这些消息数据时,它提供了类似于控制台的交互式功能界面,将数据以清晰直观的方式呈现出来。

使用场景

任何无法在本地使用控制台调试的场景,都是 PageSpy 可以大显身手的时候 !

开发h5应用,测试在不同的机子上进行测试,如果此时部分机子样式兼容遇到问题,就需要通过远程方式去进行定位,刚好测试在家,无法拿到机子,就无法及时定位解决,那么 PageSpy 此时就可以派上用场。

服务安装

要使用 PageSpy ,官方提供了 docker 镜像来自己部署服务,这样可以保证安全,开箱即用。

$ docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:release

通常把该服务运行在自己的服务器上,这样不同终端都可以试试访问。我们这里在局域网运行,所以通过 localhost:6752 来访问服务。

SDK接入

通过web服务的右上角可以看到接入方法,这里只需要在 web 项目引入脚本,由于这里是局域网,我们通过局域网 IP 来引入

<script crossorigin="anonymous" src="http://【局域网IP】:6752/page-spy/index.min.js"></script>

然后初始化 PageSpy 实例

<script> window.$pageSpy = new PageSpy(); </script>

整个流程非常简单,我们在手机端访问 web 应用,就会在左下角出现一个 PageSpy 的图标。

终端访问web应用
终端访问web应用

接下来在网站的房间列表就可以看到需要调试的终端列表。

正在访问的手机终端
正在访问的手机终端

进入关联的终端即可找到该终端相关的信息,例如网络请求,控制台输出,真机页面,html元素调试等等,简直不要太方便。👍

调试终端的控制台
调试终端的控制台

当然除了这个还有 vconsole,但对比 PageSpy ,其实还是有点不足,毕竟 vconsole 对开发来说才有用,对非开发则很难进行定位问题。