page-spy-web是一个多功能的远程调试工具,如果说 vConsole是 1.0 时代的话,那么它的出现,把移动端调试带入了 2.0 时代。项目地址:github.com/HuolalaTech…
可以直接在本地进行部署也可以通过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
点开连接
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菜单
具有多种引入方式,根据自己的项目进行选择
如果需要插件请按照官方说明操作
点击顶部的开始调试,选择在线实时
点击调试会打开一个新的页面
如果打开的不对 稍微等一会在打开
默认会在页面右下角显示网站的图标,可以在配置项中关掉
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');