pageSpy——远程调试手机内嵌H5页面

前言

pageSpy官网（https://www.pagespy.org）提供的文档说明已经很详细了，本文主要是记录一下vue项目中如何使用。

安装

yarn global add @huolala-tech/page-spy-api

# if you use npm

npm install -g @huolala-tech/page-spy-api

这里是全局安装，并非安装到项目中。

项目配置

<script  crossorigin="anonymous" src="<host>:6752/page-spy/index.min.js" ></script>
<script>
	window.$pageSpy = new PageSpy()
</script>

1. 这段代码可以放在项目的public/index.html中。
2. host：指你本地的地址，可以在cmd窗口中输入ipconfig查看，或者项目启动时一般就会显示。
3. 如需进阶配置，参照以下代码

window.$pageSpy = new PageSpy(config?: InitConfig)

interface InitConfig {
  // SDK 会从引入的路径自动分析并决定 Server 的地址（api）和调试端的地址（clientOrigin）
  // 假设你从 https://example.com/page-spy/index.min.js 引入，那么 SDK 会在内部设置：
  //   - api: "example.com"
  //   - clientOrigin: "https://example.com"
  // 如果你的服务部署在别处，就需要在这里手动指定去覆盖。
  api: '';
  clientOrigin: '';

  // project 作为信息的一种聚合，可以在调试端房间列表进行搜索
  project: 'default';

  // title 供用户提供自定义参数，可以用于区分当前调试的客户端
  // 对应的信息显示在每个调试连接面板的「设备id」下方
  title: '--';

  // 指示 SDK 初始化完成，是否自动在客户端左下角渲染「圆形白底带 Logo」的控件
  // 如果设置为 false, 可以调用 window.$pageSpy.render() 手动渲染
  autoRender: true;

  // 手动指定 PageSpy 服务的 scheme。
  // 这在 SDK 无法正确分析出 scheme 可以使用，例如 PageSpy 的浏览器插件
  // 是通过 chrome-extension://xxx/sdk/index.min.js 引入 SDK，这会
  // 被 SDK 解析成无效的 "chrome-extension://" 并回退到 ["http://", "ws://"]。
  //   - （默认）传值 undefined 或者 null：SDK 会自动分析；
  //   - 传递 boolean 值：
  //     - true：SDK 将通过 ["https://", "wss://"] 访问 PageSpy 服务
  //     - false：SDK 将通过 ["http://", "ws://"] 访问 PageSpy 服务
  enableSSL: null;
}

启动

启动page-spy-api

page-spy-api

这里用作示例的是一个uniapp项目，输入命令后会得到两个访问地址，任选其一，跳转至浏览器打开网址，然后进入房间列表页面等待,注意网址是http://localhost:6752/#/room-list，一定要看仔细了，我这个版本它给的是不对的。

启动项目

启动你的项目，看到左下角这个图标即为成功

开启调试

最后

感觉和vConsole差不多，但可操作性上确实比vConsole好。