【日常记录】PageSpy 的简单使用

1、PageSpy

PageSpy 是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。

• 本地调试 H5、Webview 应用：以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题；
• 远程办公、跨地区协同：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；
• 用户终端上出现白屏问题：传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现

2、作用

• 一眼查看客户端信息 能识别客户端运行环境，支持Linux/Mac/Window/IOS/Android
• 实时查看输出 可以实时输出客户端的Element,Console,Network,Storage
• 网络请求监控 可以捕获和显示页面的网络请求
• 远程控制台 支持远程调试客户机上的js代码

3、如何使用

主要有两种方式

1. docker中使用
2. npm 中使用

第一种方式

docker run -d --restart=always -p 6752:6752 --name="pageSpy" ghcr.io/huolalatech/page-spy-web:latest

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

第二种方式

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

# 如果你使用 npm

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

安装完成之后你可以在命令行中直接执行 page-spy-api 启动服务。部署完成后浏览器访问 < host >:6752，页面顶部会出现 接入 SDK 菜单，点击菜单查看如何在业务项目中配置并集成。

自己再 vscode 开个本地服务，，引入这个js文件，new 一下，就可以了

参考链接

• page-spy-web GitHub中文文档
• docker 方式安装 page-spy-web B站视频教程