page-spy-web 远程调试方案
2023 年 12 月 17 日 星期日(已编辑)
这篇文章上次修改于 2023 年 12 月 17 日 星期日，可能部分内容已经不适用，如有疑问可询问作者。
Debug remotely and easily like chrome devtools.
PageSpy 是一款用来调试远程 Web 项目的工具。基于对原生 API 的封装，它将调用原生方法时的参数进行过滤、转化，整理成格式规范的消息供调试端消费；调试端收到消息数据，提供类控制台可交互式的功能界面将数据呈现出来。
场景
- 本地调试 H5、Webview 应用：以往有些产品提供了可以在 H5 上查看信息的面板，但移动端屏幕太小操作不便、显示不友好，以及信息被截断等问题；
- 远程办公、跨地区协同：传统沟通方式如邮件、电话、视频会议等，沟通效率不高、故障信息不全面，容易误解误判；
- 用户终端上出现白屏问题：传统定位问题的方式包括数据监控、日志分析等，这些方式依赖排障人员要理解业务需求场景、技术实现；
部署
- 下载
- 权限
- 启动
试一试功能
传统无线调试方案
vConsole
eruda
缺点
- 不支持 Release 线上调试
项目分析
货拉拉目前仓库
page-spy-api // 后端实现
page-spy-web // 前端实现
page-spy-extension // 浏览器插件
page-spy // SDK
原理
参考
开源 Chrome DevTools Frontend
CDP js
\