PageSpy 开启远程调试新篇章

查看 60|回复 2
作者:blucas01   
为了及时响应社区反馈,PageSpy 建立了技术支持群,群内提供了视频讲解资料供大家学习、快速上手,欢迎大家入群交流。
往期内容:
  • 第一章:《支持远程调试的 “vConsole”》
  • 第二章:《有了 vConsole ,为什么我们还要做 PageSpy 》

    大背景
    对于国内的前端开发者而言,vConsole 几近做到了无人不知、无人不晓的地步;无论是开发 H5 还是小程序,大家都不可或缺的会在项目中集成。在开发 PageSpy 之前,作者本人亦是如此。
    在前几章的介绍中,各位看官也能够浅探到我们在内部去做 PageSpy 这款产品的初衷、以及当下开源的故事。
    所以在接下来,我会接着前几章的内容继续讲述:在 vConsole 占领前端调试领域半边天的背景下,「PageSpy 如何破局」,做到敌无我有、敌有我强!
    契机!
    至于为什么开发 PageSpy 的背景,在前面的章节中我们已经交代过,简而言之就是:开发和测试在不同的城市,项目提测后出现问题,如果你想依赖:
    [ol]
  • 测试小姐姐上报故障描述
  • 测试小姐姐把 vConsole 截图发过来
    [/ol]
    这些实践都是 沟通成本并不低、同时相当不靠谱 的,作者已经替你们试过了。
    究其原因:测试小姐姐对程序代码的逻辑是两眼一抹黑;而开发想要确认的千奇百怪的故障却始终要依赖测试小姐姐们来 “中转” 信息。
    破局
    本着开发者 “自己动手、丰衣足食” 的精神,我们开发了一个闭环的产品来承担部分测试环节的工作量,PageSpy 由三部分组成:
  • PageSpy Web 调试端:由开发者使用;一个类似控制台的、交互友好的、实时同步数据的前端界面;
  • PageSpy API 服务端:调试端和 SDK 的 “中间人”。负责中转两端之间的通信消息;
  • PageSpy SDK:由开发者在业务项目中集成,集成后通过实例化即可收集客户端的运行信息,通过 Server API 将消息转发到调试端,开发者即可对项目的运行状况一目了然。

    对于以上三个部分,PageSpy 合三为一,提供了一键使用的支持,各位开发者无需关心内部实现细节,可以直接上手集成,点击查看详情。
    在有了 PageSpy 后,开发者和测试人员之间的协同可以大效率提升,这里主要体现在:
  • 减少测试人员的心智负担:测试只需要简单描述故障信息、操作步骤,让开发者了解基本情况;
  • 降低不同职能岗位协同的沟通成本:PageSpy 以类似 Chrome 控制台的形式还原程序的运行现场信息,只要报错信息在我开发者面前,任他妖魔鬼怪,95% 的问题都可以束手就擒;

    OK ,通过这里简单的阐述,如果你之前使用过 vConsole ,或许已经 Get 到 PageSpy 和它最大的不同:PageSpy 内置服务端通信模块,支持远程调试!
    功能领先
    除了支持远程调试这个场景之外,PageSpy 同样是从产品功能的多样性上碾压对手。

    具体来说:
    [ol]
  • 使用场景:同样支持 H5 远程调试;
    [/ol]

    [ol]
  • 日志面板:对于同样的输入,vConsole 的输出略微有点瑕疵;
    [/ol]

    [ol]
  • 日志面板:当发生报错时,PageSpy 支持定位到源码;
    [/ol]

    [ol]
  • 网络面板:大体积的响应数据,PageSpy 支持懒加载、vConsole 则是直接截断;
    [/ol]

    [ol]
  • 网络面板:对于不同媒体类型的响应数据,PageSpy 的处理方式符合开发者的第一直觉;
    [/ol]

    [ol]
  • 系统分析:对于项目所运行的环境信息,PageSpy 会分析客户端系统、浏览器和版本,以及对纳入 ES 规范的 API 做出兼容性判断,开发者则是能够一目了然;
    [/ol]

    使用成本
    在了解了功能和使用场景层面的差异后,剩下的就是看谁更简单、易用。
    在使用成本上,PageSpy 丝毫不逊色,只需要两步即可上手使用:
    [ol]
  • 引入 SDK 文件;
  • 实例化。
    [/ol]
    你没看错,就是这么简单。PageSpy 将复杂性封装在自身内部,提供一键部署成功的特性,同时又开放了可选的配置参数供用户定制它的表现行为(默认参数适用于绝大多数场景)。
    结语
    vConsole 是一款很实用的产品,切实的为大家在调试 H5 的场景带来了诸多便捷,但可能由于产品设计限制,致使上文的诸多不变;
    在拓展了调试的适用场景、丰富产品功能多样性和优化功能的稳定性后,PageSpy 继承 “前辈” 的开源精神,向社区贡献自己的一份力量,PageSpy 希望能够得到大家的多多支持!

    pagespy, vconsole, 调试, 开发者

  • jhdxr   
    我还真没听说过 vConsole 。。。是因为不做小程序用不上,还是我落后版本太多了?
    blucas01
    OP
      
    @jhdxr 开发中后台的话的确用不上,vConsole 的场景适用于小程序和 H5 开发,PageSpy 进一步支持远程调试,方便异地协同。
    您需要登录后才可以回帖 登录 | 立即注册

    返回顶部