V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
blucas01
V2EX  ›  程序员

PageSpy 开启远程调试新篇章

  •  4
     
  •   blucas01 · 194 天前 · 4558 次点击
    这是一个创建于 194 天前的主题,其中的信息可能已经有所发展或是发生改变。

    为了及时响应社区反馈,PageSpy 建立了技术支持群,群内提供了视频讲解资料供大家学习、快速上手,欢迎大家入群交流。

    往期内容:

    大背景

    对于国内的前端开发者而言,vConsole 几近做到了无人不知、无人不晓的地步;无论是开发 H5 还是小程序,大家都不可或缺的会在项目中集成。在开发 PageSpy 之前,作者本人亦是如此。

    在前几章的介绍中,各位看官也能够浅探到我们在内部去做 PageSpy 这款产品的初衷、以及当下开源的故事。

    所以在接下来,我会接着前几章的内容继续讲述:在 vConsole 占领前端调试领域半边天的背景下,「PageSpy 如何破局」,做到敌无我有、敌有我强!

    契机!

    至于为什么开发 PageSpy 的背景,在前面的章节中我们已经交代过,简而言之就是:开发和测试在不同的城市,项目提测后出现问题,如果你想依赖:

    1. 测试小姐姐上报故障描述
    2. 测试小姐姐把 vConsole 截图发过来

    这些实践都是 沟通成本并不低、同时相当不靠谱 的,作者已经替你们试过了。

    究其原因:测试小姐姐对程序代码的逻辑是两眼一抹黑;而开发想要确认的千奇百怪的故障却始终要依赖测试小姐姐们来 “中转” 信息。

    破局

    本着开发者 “自己动手、丰衣足食” 的精神,我们开发了一个闭环的产品来承担部分测试环节的工作量,PageSpy 由三部分组成:

    • PageSpy Web 调试端:由开发者使用;一个类似控制台的、交互友好的、实时同步数据的前端界面;
    • PageSpy API 服务端:调试端和 SDK 的 “中间人”。负责中转两端之间的通信消息;
    • PageSpy SDK:由开发者在业务项目中集成,集成后通过实例化即可收集客户端的运行信息,通过 Server API 将消息转发到调试端,开发者即可对项目的运行状况一目了然。

    对于以上三个部分,PageSpy 合三为一,提供了一键使用的支持,各位开发者无需关心内部实现细节,可以直接上手集成,点击查看详情

    在有了 PageSpy 后,开发者和测试人员之间的协同可以大效率提升,这里主要体现在:

    • 减少测试人员的心智负担:测试只需要简单描述故障信息、操作步骤,让开发者了解基本情况;
    • 降低不同职能岗位协同的沟通成本:PageSpy 以类似 Chrome 控制台的形式还原程序的运行现场信息,只要报错信息在我开发者面前,任他妖魔鬼怪,95% 的问题都可以束手就擒;

    OK ,通过这里简单的阐述,如果你之前使用过 vConsole ,或许已经 Get 到 PageSpy 和它最大的不同:PageSpy 内置服务端通信模块,支持远程调试!

    功能领先

    除了支持远程调试这个场景之外,PageSpy 同样是从产品功能的多样性上碾压对手。

    image.png

    具体来说:

    1. 使用场景:同样支持 H5 远程调试;

    image.png

    1. 日志面板:对于同样的输入,vConsole 的输出略微有点瑕疵;

    image.png

    1. 日志面板:当发生报错时,PageSpy 支持定位到源码;

    image.png

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

    image.png

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

    image.png

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

    image.png

    使用成本

    在了解了功能和使用场景层面的差异后,剩下的就是看谁更简单、易用。

    在使用成本上,PageSpy 丝毫不逊色,只需要两步即可上手使用:

    1. 引入 SDK 文件;
    2. 实例化。

    你没看错,就是这么简单。PageSpy 将复杂性封装在自身内部,提供一键部署成功的特性,同时又开放了可选的配置参数供用户定制它的表现行为(默认参数适用于绝大多数场景)。

    结语

    vConsole 是一款很实用的产品,切实的为大家在调试 H5 的场景带来了诸多便捷,但可能由于产品设计限制,致使上文的诸多不变;

    在拓展了调试的适用场景、丰富产品功能多样性和优化功能的稳定性后,PageSpy 继承 “前辈” 的开源精神,向社区贡献自己的一份力量,PageSpy 希望能够得到大家的多多支持!

    27 条回复    2023-12-11 11:51:20 +08:00
    jhdxr
        1
    jhdxr  
       194 天前   ❤️ 1
    我还真没听说过 vConsole 。。。是因为不做小程序用不上,还是我落后版本太多了?
    blucas01
        2
    blucas01  
    OP
       194 天前
    @jhdxr 开发中后台的话的确用不上,vConsole 的场景适用于小程序和 H5 开发,PageSpy 进一步支持远程调试,方便异地协同。
    dcdlove
        3
    dcdlove  
       194 天前
    你们做得非常好,之前体验过,我们测试小姐姐非常喜欢,但是我们是做外包的,前端没有什么话语权,线上项目,集成做了一个动态加载 这个 sdk 和初始化 可是我们没有资源部署一份带 ssl 服务端所以无法在生产环境使用,如果你们能提供一个公用的服务端就好了,之前钉钉的远程调试提供过类似的 sdk
    blucas01
        4
    blucas01  
    OP
       194 天前
    @dcdlove 😄 非常感谢你对 PageSpy 的认可。一个公用的服务虽然带来了便捷性,但是也存在数据安全风险;然后针对你说的这个情况,其实我们先下载一个「花生壳」 APP ,接着在本地启动 PageSpy 服务,然后用花生壳提供的功能实现本地服务的在线访问(它提供 https 支持),可以试试哦
    blucas01
        5
    blucas01  
    OP
       194 天前
    @dcdlove 如果不知道具体的实施细节,欢迎加入技术支持群细聊 😊
    z4zr
        6
    z4zr  
       194 天前
    支持支持
    blucas01
        7
    blucas01  
    OP
       194 天前
    @z4zr 非常感谢你的认可,期待后续的使用反馈 😊
    manhere
        8
    manhere  
       193 天前
    vconsole 是古董了吧...现在都是 eruda
    blucas01
        9
    blucas01  
    OP
       193 天前
    @manhere 😊
    chanChristin
        10
    chanChristin  
       193 天前
    这个是要部署在服务器上吗,还是安装在项目内部?我看安装方法是要全局 npm
    blucas01
        11
    blucas01  
    OP
       193 天前
    @chanChristin 需要部署服务。npm 安装是其中一种方式,还提供了 docker 镜像。可以先看一下视频快速入门: https://space.bilibili.com/3493272492181886 😄
    chanChristin
        12
    chanChristin  
       193 天前
    @blucas01 #11 要部署在服务器上就麻烦一点了,公司内部想往服务器上部署东西还要找运维,如果项目内的话还可以自己发测试环境看看效果。
    blucas01
        13
    blucas01  
    OP
       193 天前
    @chanChristin 可以参考四楼的回复,本地服务在线访问
    TMaize
        14
    TMaize  
       193 天前
    支持支持
    blucas01
        15
    blucas01  
    OP
       193 天前
    @TMaize 谢谢 😊
    xppgg
        16
    xppgg  
       193 天前
    前一段时间已经部署到公司服务器了,是我今年见到的非常好的一个开源项目,感谢开源
    blucas01
        17
    blucas01  
    OP
       193 天前
    @xupapagg 非常感谢认可,友情提示:注意做好数据安全的保护措施哦 😊
    alleluya
        18
    alleluya  
       192 天前
    歪个楼 vconsole 现在 vue3 可以用了吗? 我记得 3.0 刚出不久的时候 vconsole 调试有问题 后来改用 eruda 不过我觉得 eruda 其实没有 vconsole 好用...
    alleluya
        20
    alleluya  
       192 天前
    @blucas01 你们这个看着不错的 下回做 H5 的时候试试 😊
    blucas01
        21
    blucas01  
    OP
       192 天前
    @alleluya 哈哈,好滴。期待你的后续使用反馈,遇到任何问题,可以加入技术支持群细聊 🤝
    SingeeKing
        22
    SingeeKing  
       192 天前
    现在流行「推广」不发网址吗,遇到好多通篇看上去没找到一个入口的……

    https://huolalatech.github.io/page-spy-web/
    blucas01
        23
    blucas01  
    OP
       192 天前
    @SingeeKing 其实文中有仓库链接,亮色模式下超链的样式不是很显眼,暗色模式下要好些。不过还是很感谢 ❤️
    GuryYu
        24
    GuryYu  
       187 天前
    @blucas01
    docker 版的镜像能发布到 DockerHub 吗,公司内只对 DockerHub 有镜像加速,其他的源就很慢甚至打不开
    blucas01
        25
    blucas01  
    OP
       187 天前
    @GuryYu 可以使用 NPM Package 哈,也超级方便 😊 这个是视频介绍: https://www.bilibili.com/video/BV1oM4y1p7Le/?vd_source=6b4fed1a463f67c0e8e56eaa21faa997
    jucelin
        26
    jucelin  
       187 天前
    我通过 npm install -g @huolala-tech/page-spy-api 安装的,首页错乱,好像缺少 css
    我在页面上加载了 page-spy/index.min.js ,出现了图标,但 PC 上点图标没反应,移动端点了就显示了 Device ID 等信息的对话框,没有 vConsole 的面板
    blucas01
        27
    blucas01  
    OP
       187 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2766 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 28ms · UTC 06:42 · PVG 14:42 · LAX 23:42 · JFK 02:42
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.