PageSpy远程调试

# PageSpy远程调试

`page-spy-web`是一个多功能的远程调试工具，如果说 `vConsole`是 1.0 时代的话，那么它的出现，把移动端调试带入了 2.0 时代。项目地址：[https://github.com/HuolalaTech/page-spy-web](https://github.com/HuolalaTech/page-spy-web)

![image](http://banmag.cn:8089/i/2024/06/27/667ccc85a796d.png)

可以直接在本地进行部署也可以通过dcoker部署

### 本地部署

全局安装 `page-spy-api`命令，根据你使用的包管理器自行选择响应的命令执行

```
# 使用 yarn
yarn global add @huolala-tech/page-spy-api@latest

# 使用 npm
npm install -g @huolala-tech/page-spy-api@latest
```

启动服务

```
page-spy-api
```

![image](http://banmag.cn:8089/i/2024/06/27/667ccc8adfaf8.png)

点开连接

### docker部署

```bash
docker run -d --restart=always -v /share/CACHEDEV4_DATA/docker/dockerMap/page-spy-web/log:/app/log -v /share/CACHEDEV4_DATA/docker/dockerMap/page-spy-web/data:/app/data -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest
```

启动完成后浏览器访问 `<host>:6752`，页面顶部会出现 `接入 SDK` 菜单，点击菜单查看如何在业务项目中配置并集成。

### 使用

打开地址，点击页面顶部的 `接入SDK`菜单

![image](http://banmag.cn:8089/i/2024/06/27/667ccc8de3547.png)

具有多种引入方式，根据自己的项目进行选择

如果需要插件请按照官方说明操作

点击顶部的开始调试，选择`在线实时`

‍

![image](http://banmag.cn:8089/i/2024/06/27/667ccc9546704.png)

点击调试会打开一个新的页面

![image](http://banmag.cn:8089/i/2024/06/27/667ccc9c2476b.png)

如果打开的不对  稍微等一会在打开

![image](http://banmag.cn:8089/i/2024/06/27/667ccc9f309f9.png)

默认会在页面右下角显示网站的图标，可以在配置项中关掉

```js
 window.$pageSpy = new PageSpy({autoRender:false});
```

### 使用插件

具体的参考官方

这里添加一个离线的插件

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" href="/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vite App</title>
    <script crossorigin="anonymous" src="http://<IP>/page-spy/index.min.js"></script>
    <script src="http://<IP>/plugin/data-harbor/index.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
   
    <script type="module" src="/src/main.js"></script>
    <script>
// 离线插件
       window.$harbor = new DataHarborPlugin();
      PageSpy.registerPlugin(window.$harbor);
      // 实例化
      window.$pageSpy = new PageSpy({autoRender:false});
    </script>
  </body>
</html>

```

需要将数据上传的时候在后台输入

```bash
window.$harbor.onOfflineLog('upload');
// 下载
window.$harbor.onOfflineLog('donwload');
```

‍

![image](http://banmag.cn:8089/i/2024/06/27/667ccca460e52.png)