Javascript is required
page-spy-web 远程调试方案

https://github.com/HuolalaTech/page-spy-web

Debug remotely and easily like chrome devtools.

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

场景

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

部署

  1. 下载
  2. 权限
  3. 启动

试一试功能

传统无线调试方案

vConsole

https://github.com/Tencent/vConsole

eruda

https://github.com/liriliri/eruda

缺点

  • 不支持 Release 线上调试

项目分析

货拉拉目前仓库

page-spy-api // 后端实现
page-spy-web // 前端实现
page-spy-extension // 浏览器插件
page-spy // SDK

原理

参考

开源 Chrome DevTools Frontend

https://github.com/ChromeDevTools/devtools-frontend

CDP js

https://github.com/cyrus-and/chrome-remote-interface

\