支持远程调试的 “vConsole”

[blucas01]

背景

前阵子一直在做业务需求，是嵌在公司 APP 里的 H5 。而且是跨地区协作，我在 A 城市，测试和产品都在 B 城市。

由于是 H5 项目，开发的时候一般都会实例化个 vConsole ，方便查看项目的上下文信息。同时我想着当程序出现问题之后，测试小姐姐可以直接截个 vConsole 的图给我，可以减少沟通时间。

痛点

后来发现一切都是想象之中，我们两个在沟通问题上依旧没少花时间！如果把程序出现的问题分级，那么会有：

• 😄 简单问题：测试小姐姐 描述问题 发生的过程后，基本可以定位、解决；
• 😅 中等问题：测试流程走不下去或者程序报错，这时候得查看调试信息去分析。此时需要测试小姐姐 截图 vConsole 上面显示的内容发我，但由于截的图并不一定是关键信息或者信息数据不够，导致这中间会产生几轮沟通；
• 😥 复杂问题：遇到一些依赖外部信息或者奇奇怪怪的问题的时候，可能会 远程视频 操作测试机给我看，同时我会告诉她什么时候打开 vConsole 查看什么面板的信息。

可以看到只要问题牵扯到了项目的运行信息，前前后后就会导致很多沟通上的时间成本

不禁让人思考是什么原因导致的这个问题……

问题的本质

结合前面的描述我们得知，由于物理空间、跨地域的限制，程序的错误信息都是由测试人员转达给技术人员，不得不说这对测试人员有点勉为其难了，而另一方面造成问题的关键就在于此：技术人员无法和 Bug 直接来个正面交锋！

那么该如何解决这个「中间人」的问题呢？

这个问题的答案其实很简单，我们只要将浏览器的原生 API 进行一层包装将运行时调用的参数收集起来，然后再整一套类似控制台的 UI ，最后整合成 SDK 处理参数 -> 中间层网络通信 -> UI 控制台展示的样子，开发同学直接和控制台上的 BUG 切磋，就能完美的解决这个问题！

虽然说起来简单，但是这一整套下来开发的工作量可不容小觑：

• 包装原生 API 的 SDK
• 负责通信的服务
• 控制台 UI……

不用慌！我们带着开箱即用的 PageSpy 来了！

PageSpy

点击加入 技术支持群

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

PageSpy 是一个强大的开源前端远程调试平台，它可以显著提高我们在面对前端问题时的效率。以下是 PageSpy 的一些主要特点：

• 一眼查看客户端信息 PageSpy 会对客户端的运行环境进行识别，其中系统识别支持 Mac / iOS / Window / Linux / Android ，浏览器识别支持谷歌、火狐、Safari 、Edge 、微信、UC 、百度、QQ ；
• 实时查看输出： PageSpy 可以实时捕获并显示程序输出，包括 Console 、Network 、Storage 和 Element 。这使开发人员能够直观地了解页面的外观和行为，无需依赖用户的描述或截图。
• 网络请求监控： PageSpy 还可以捕获和显示页面的网络请求，有助于开发人员更好的查看与后端的交互。
• 远程控制台： PageSpy 支持远程调试 JavaScript 代码，允许开发人员执行 JavaScript 代码在用户的浏览器上运行。这对于排查特定问题或测试代码修复非常有帮助。
• 跨浏览器兼容性： SDK 可以在各种主流浏览器中运行，确保你可以检查和调试不同浏览器上的问题。
• 用户体验提升： 通过快速识别和解决前端问题，PageSpy 可以显著提升用户体验，减少用户因前端问题而受到的不便。

相关截图

门户首页

待调试列表

调试界面

结语

前端远程调试对于快速而准确地解决前端问题至关重要。Page Spy 作为一个强大的开源工具，支持开箱即用，为开发人员提供了一个高效的方式来查看用户端的页面输出、网络请求和执行远程调试。它有助于加速问题的定位和解决，减少了对用户反馈和日志的依赖，提高了整体开发效率。除了解决跨地区协同的场景之外，还覆盖了本地开发时的调试 H5 的场景。

希望本文能够帮到大家对 PageSpy 有个初步的认识，感谢阅读。

[iOCZS]

就是用 socket 来远程控制 vconsole ，并从 vconsole 获取数据在控制页面上展示

[blucas01]

@iOCZS 不是，这里借各位开发者对 vConsole 这款产品的理解，来表述 PageSpy 的远程调试功能。实际上 PageSpy 和 vConsole 无任何关联。SDK 、Server 、调试端都是自己写的。

[blucas01]

一开始我们是单纯的想解决远程调试的问题，不曾想对本地调试 H5 也非常好用 😄

[Masoud2023]

原来前端也有这种线上调试工具，一直以为只有后端有。

[element90]

这种产品应该有很多啊，不过我不是做客户端开发的，所以不清楚具体的选型有哪些。

不过以前客户端的同事(Android/iOS) 都会接入这类似的平台，这些平台的 SDK 会帮忙收集客户端产生的日志，只是大部分情况下不会主动且实时上报到平台，而是本地记录，作为技术统计用的，当出现错误崩溃时也会记录错误日志栈，之后会将这些日志再上传到平台，所以他们可以在平台上通过错误栈和搭配其他统计信息进行远程 debug 。

所以主要区别是在于追踪非实时，并且只监测不控制。而我觉得这种方式更为合适，因为对于用户层面上来说，因为需要 debug 产品而对程序进行控制并不厚道，对于工程师来说，他们关注的点应该是出错信息而不是对于每一个客户端设备 debug ，所以只监测不控制，也不需要实时监测

[blucas01]

@Masoud2023 欢迎推荐给贵圈的前端小伙伴们使用 😊

[monmon]

很好用，3 分钟集成，使用体验非常丝滑

[blucas01]

@element90 你说的这种属于监控埋点、错误上报，使用周期一般为产品「上线后」；

PageSpy 的使用周期主要是「开发、测试」阶段：
- 「开发」阶段是指任何无法使用本地调试控制台的时候，比如微信 H5 、飞书应用等；
- 「测试」阶段适用于我在文中说的异地协同；
当然也可以用于「上线后」的生产阶段，比如生产环境的某个页面，只有个别用户访问后是白屏的。

总得来说，在使用 PageSpy 的时候，开发者、用户（可以是测试、产品、或者真实的用户）双方都应该明确知道正在出于调试状态。

[blucas01]

@monmon 😄 感谢你的认可，欢迎推荐给身边的朋友

[jones2000]

怎么远程断点调试？

[blucas01]

@jones2000 还不支持

[yafoo]

不错，确实有这种需求，以前想过发日志到服务端，有这样的完整方案是最好的了

[yafoo]

如果能再支持小程序就好了

[blucas01]

@yafoo 小程序的支持已经在计划中，还请多多关注 💪⛽️

[lonjin]

为啥点击添加房间后，接口提示添加成功，但是房间列表还是没数据

[blucas01]

@lonjin 确认客户端 sdk 创建房间的地址和调试端 web 上的地址是同一个服务

[codingBug]

小程序好像不能看网络请求，希望 op 的能支持小程序

[blucas01]

@codingBug 小程序的支持在计划中，请多多关注

[zobor]

不错不错

[blucas01]

@zobor 感谢认可，欢迎推荐给身边的朋友哦，也期待后续的使用反馈，遇到问题可以加入技术支持群细聊 😊

[zobor]

@blucas01 可以的 用起来

[MrDavidJones]

好像没有说明如何插入 SDK ，一定要安装才能看到么？如果可以通过代理挟持的形式注入 SDK 脚本会不会更好起码不用改源码。

[blucas01]

@MrDavidJones 接入 SDK 的指引按钮需要部署后才能看到；对于后面的问题，我们提供了油猴脚本和浏览器插件哦，看这里： https://github.com/HuolalaTech/page-spy-web/wiki/%F0%9F%90%9E-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94#7-%E4%B8%8D%E6%83%B3%E5%9C%A8%E9%A1%B9%E7%9B%AE%E9%87%8C%E6%89%8B%E5%8A%A8%E9%9B%86%E6%88%90%E6%9C%89%E6%B2%A1%E6%9C%89%E5%8A%9E%E6%B3%95%E5%8F%AF%E4%BB%A5%E4%B8%8D%E4%BE%B5%E5%85%A5%E4%B8%9A%E5%8A%A1%E9%A1%B9%E7%9B%AE%E4%BB%A3%E7%A0%81

[1044523901]

不错哦

[xzysaber]

这是基于 CDP 做的吗？

[linshuizhaoying]

支持了小程序记得回 @

[blucas01]

@xzysaber 不是

[blucas01]

@linshuizhaoying 好嘞，小程序正在内测中。

[xfe1235]

支持

[yamedie]

但这样一来，用户隐私不就被开发人员一览无遗了吗，因为你连用户登录态都能掌握，完全可以仿冒用户身份查看用户订单或其他任何信息。

给人感觉有一点隐私换便利的意味。或者说，这样的 Spy 在上线前需要经过开发安全评审吗？什么人在何种情况下可以调试用户的 console 并从中取数？

[blucas01]

@yamedie 我们提供了一把很好用的刀，开源出来是希望能够帮助大家回家切菜、切肉更方便，但是你说你要去报复社会……这我也没办法啊 😭

以上是笑话也是实话，本质上是需要自行控制一下在什么环境去注入 PageSpy 。对此我们也有相关的讨论，可以参考：
- 点击查看 [**PageSpy 如何单独对某个用户调试**]( https://github.com/HuolalaTech/page-spy-web/wiki/%F0%9F%90%9E-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94#%E5%A6%82%E4%BD%95%E5%8D%95%E7%8B%AC%E5%AF%B9%E6%9F%90%E4%B8%AA%E7%94%A8%E6%88%B7%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95)
- 点击查看 [**issue 讨论**]( https://github.com/HuolalaTech/page-spy-web/issues/127)

[yamedie]

本质上，这是以 [用户隐私暴露风险] 换取 [开发人员调试便利] 的一个后门。即便你在管理端做了密码鉴权，但仍然无法完全避免未经授权的开发人员私自查看 [任意在线用户的隐私数据] ，而且是在 [用户未授权、无感知] 的情况下。

这个 SDK 虽然能为线上 debug 带来很大便利，但这种便利其实是通过用户隐私换来的。所以我觉得这个 Spy 其实是一个留给开发者的后门，如果原生 App 植入了这种类型的 SDK ，应该是没法上架 Google Play 商店的。

[blucas01]

@yamedie 在生产环境不允许注入 SDK 不就行了吗？仅仅在测试环境使用就能覆盖到很多场景的。另外，PageSpy 建议是即用即关，哪个用户反馈问题过来，就针对那个用户调试，不建议默认对所有用户开启。可以仔细看一下这个说明： https://github.com/HuolalaTech/page-spy-web/wiki/%F0%9F%90%9E-%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E7%AD%94#%E5%A6%82%E4%BD%95%E5%8D%95%E7%8B%AC%E5%AF%B9%E6%9F%90%E4%B8%AA%E7%94%A8%E6%88%B7%E8%BF%9B%E8%A1%8C%E8%B0%83%E8%AF%95

[param]

我一直想找这样的工具啊，就是没找到好用的。
关于任意查看客户隐私这点，我的方案是给用户搞个开关，要求用户打开后才能任意操作。

[plqqlp123]

@param 同类型工具： https://github.com/Nice-PLQ/devtools-remote-debugger

[blucas01]

@param 开关或者手势都可以的

[ixuelei]

@yamedie 你知道你的手机都能试试录屏被手机商看到的吗还有摄像头的画面也是能被手机商看到的，只要他们想看

[yamedie]

@ixuelei 你这属于为杠而杠了。

我在说：jssdk 本质是后门（上规模的公司不会允许运维开发人员私自上这种 sdk ，以防在职或离职人员滥用后门查看用户隐私）。

你在说：手机厂商可能也预留了后门你怎么不提。

另外我手机用 Pixel ，平时不开小猫咪，你告诉我 google 怎么看？

[blucas01]

@yamedie @ixuelei 不吵不吵，所有事物辩论起来基本都有利有弊，PageSpy 的初衷是提供一个好用的调试工具，如何使用还得看用户自己。另外 PageSpy 1.8.0 就在昨天也发布咯～