PAGESPY远程调试

219 阅读1分钟

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

image

可以直接在本地进行部署也可以通过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

点开连接

docker部署

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

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

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

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

image

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

image

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

image

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

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

使用插件

具体的参考官方

这里添加一个离线的插件

<!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>

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

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

image