支持远程调试的 "vConsole"

447次阅读  |  发布于1年以前

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

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

痛点

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

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

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

问题的本质

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

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

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

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

不用慌!开箱即用的 PageSpy 值得你拥有 !

PageSpy

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

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

使用 PageSpy 进行远程调试

点击加入 技术支持群。

使用PageSpy进行远程调试是相对简单的。以下是一些基本步骤:

相关截图

门户首页

待调试列表

调试界面

结语

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

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

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8