PageSpy：方便远程调试web的利器

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 的图标。

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

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

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