特别是在做 H5 开发的时候为了方便调试，一般都会在本地或者测试环境安装 vConsole 插件方便查看日志、错误信息等。
但如果是测试在远程发现了错误还是需要打开 vConsole 截图再转发。如果有这么一个工具，让我们开发远程实时查看用户的操作日志、数据请求和缓存数据，岂不是更省事。
大家看了上面的描述可能会联想到埋点上报，先别急，今天介绍的这个工具和埋点有着本质区别。
今天给大家推荐一个调试利器 PageSpy
PageSpy是什么？
PageSpy 是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。
主要功能是什么？
- 实时日志查看 - 可实时输出客户端的
Console日志 - 远程控制台 - 支持远程调试客户机上的js代码
- 网络请求监控 - 可以捕获和显示页面的网络请求
- 用户端缓存查看 - 可以远程实时查看用户端缓存数据
- 查看客户端信息 - 自动输出客户端运行环境
使用方式
安装服务端
方式一：使用 Docker 部署（个人推荐）
| |
启动完成后浏览器访问 <host>:6752，页面顶部会出现 接入 SDK 菜单，点击菜单查看如何在业务项目中配置并集成。
方式二：使用 Node 部署
全局安装依赖
1 2 3 4 5yarn global add @huolala-tech/page-spy-api@latest # 如果你使用 npm npm install -g @huolala-tech/page-spy-api@latest启动服务
安装完成之后你可以在命令行中直接执行
page-spy-api启动服务。部署完成后浏览器访问<host>:6752，页面顶部会出现接入 SDK菜单，点击菜单查看如何在业务项目中配置并集成。
按照上面任意一种方式安装好服务端后在浏览器打开 <host>:6752 出现下方的页面就代表部署成功了🎉。
接入SDK
点击页面头部 接入 SDK 按钮，查看接入文档并按照文档进行操作
创建一个简单的项目并按照文档接入 SDK ,并添加一些测试代码
在浏览器打开对应测试页面，当看到页面左小角显示Pagepy的logo说明引入成功了。
打开服务端页面 <host>:6752，点击房间列表查看设备列表
功能概览
输出面板: 显示
console.<log | info | warn | error>日志信息，可以执行代码；
网络面板: 显示
fetch|XMLHttpRequest|navigator.sendBeacon的网络请求；
页面面板: 显示当前页面，查看 HTML 节点树；
存储面板: 查看
localStorage|sessionStorage|cookie|indexedDB缓存数据；
系统面板: 显示 userAgent 信息，查看 api 兼容性。
扩展 - 在 Vue 项目中接入 PageSpy
使用 Vite 创建测试项目
在 Vue 项目中引用 PageSpy
- 在
index.html中增加 EJS 标签(对应下图中 1) - 在
vite.config.ts中配置,该方式可以按需引入需要的功能即可(对应下图中 2、3)
一般项目中生产环境是不需要调试工具的所以需要在第三步结合 Vite 的环境变量自行判断
- 在
执行
npm run dev运行项目，打开运行后项目链接
在浏览器打开对应页面，当看到页面左小角显示
Pagepy的logo说明引入成功了
在服务端页面找到对应的 Vue 项目点击调试就能进行相关的调试操作了
参考
PageSpy 文档：https://www.pagespy.org/docs
PageSpy 源码：https://github.com/HuolalaTech/page-spy-web
vite-plugin-html 文档: https://github.com/vbenjs/vite-plugin-html/blob/main/README.zh_CN.md
vite-plugin-html 源码：https://github.com/vbenjs/vite-plugin-html