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

有了 vConsole,我们为什么还要做 PageSpy

  •  2
     
  •   blucas01 · 2023-12-01 09:25:39 +08:00 · 4488 次点击
    这是一个创建于 365 天前的主题,其中的信息可能已经有所发展或是发生改变。

    接上回 《支持远程调试的 "vConsole"》 发出后,大家对此挺感兴趣,所以咱这回接着唠。

    起初在开发 PageSpy 的时候,我们是想着解决 vConsole 做不到的事情,也就是远程调试的工作协同:开发人员在上海,测试、产品等团队在深圳。

    那时候是这样的啊,项目白屏了、程序报错了、接口 Error 了,完事儿让测试人员对着 vConsole 截图,人家怎么知道截啥图、截哪个面板的图?具体来说,打个比方:js 里通过 res.data.users.map(fn) 去遍历用户渲染,但是由于种种原因,接口返回的数据长这样式儿的:

    {
        "success": true,
        "message": "请求成功",
        "data": null
    }
    

    测试人员在 vConsole 看到的、最直观的也就是以下 "报红" 错误信息:

    Uncaught TypeError: Cannot read properties of null (reading 'users')
        at <压缩后的.js>:3:10010
    

    当测试小姐姐把这个错误截图发过来的时候,对开发人员排障有什么帮助吗?有的!我们从中可以得知:

    1. 读取的是某个对象的 users 属性;
    2. 是在 <压缩后的.js> 第 3 行、第 10010 列处发生的问题;

    信息量够吗?单独针对于这个场景,勉强可以接受,虽然 .users 的关键词搜索结果很多,但因为我们可以去扒 <压缩后的.js> 文件,耐心的定位到错误堆栈的具体报错位置,再结合我们自身对这个项目源代码的熟悉、理解,有经验的同学还是能够找到问题所在的,但是大家等我说完这一大串也能感受到,整个排查的过程下来会很累。。。

    那如果客户端报错的现场不是在测试小姐姐那边、是在我们本地谷歌浏览器的话,排障的流程又会是什么样子的呢?

    • 发现 Console 面板报错,堆栈中有源码索引;
    • 点击后会定位到源文件的原始行列;
    • 初步确认数据有问题后,切换到 Network 面板,查看接口返回的数据;
    • 确认问题。

    相比上面的 "盲人摸象",本地的排障非常的自然、顺畅。

    正因如此,PageSpy 本着向控制台看齐的初衷,基本还原了控制台排障的流程:

    • 当程序报错时支持可以查看错误堆栈

    image.png

    • 支持定位源码

    image.png

    • 查看网络请求和响应数据

    image.png

    除了上面提到的这些功能外,我们在 PageSpy 的应用截图中也可以看到其他的信息:

    • 左上角自动识别了当前客户端的系统、浏览器,当鼠标划过时还会显示更加具体的版本详情;
    • 中间顶部显示着当前调试连接的在线状态;
    • 侧边栏按钮中得知可以查看日志输出、网络请求、页面渲染状况、缓存信息、系统信息(这是什么?);

    当开发者直面这些数据的时候,大多数问题将迎刃而解。今天我们先分享到这里,大家如果感兴趣的话,可以查看 官网文档,官方提供了 Docker / Node 等方式的部署方案,一键部署、一劳永逸,使用起来非常简单。

    有问题大家可以加入 技术支持群

    20 条回复    2023-12-28 20:26:09 +08:00
    vaporSpace
        1
    vaporSpace  
       2023-12-01 10:03:22 +08:00
    Good !真的很方便,群满了,方便拉一下吗
    blucas01
        2
    blucas01  
    OP
       2023-12-01 10:04:54 +08:00
    @vaporSpace 可以啊,你的微信号是?
    vaporSpace
        3
    vaporSpace  
       2023-12-01 10:07:08 +08:00
    @blucas01 bWFueXVlZ3VqaW4=
    blucas01
        4
    blucas01  
    OP
       2023-12-01 10:09:50 +08:00
    @vaporSpace 申请已发送
    Hilong
        5
    Hilong  
       2023-12-01 10:27:54 +08:00
    感觉有点意思哦。可以针对性的调试到特定机器吗?比如测试的手机
    blucas01
        6
    blucas01  
    OP
       2023-12-01 10:32:03 +08:00
    @Hilong 已经有方案了,欢迎加入群组织细聊 😄
    Gaoti
        7
    Gaoti  
       2023-12-01 10:45:16 +08:00
    能定位到源码,是要开 sourceMap ?
    blucas01
        8
    blucas01  
    OP
       2023-12-01 11:30:29 +08:00
    @Gaoti 对的 ❤️
    kamilic
        9
    kamilic  
       2023-12-01 14:37:40 +08:00
    超级加强版的 chii 呀,666 。
    以前也有开过脑洞,能不能把 chii 部署到远端然后整个团队共享使用。
    blucas01
        10
    blucas01  
    OP
       2023-12-01 14:56:55 +08:00
    @kamilic 😁 非常期待你的后续使用反馈哦,也可以先加入微信支持群,遇到问题第一时间支持
    9ki
        11
    9ki  
       2023-12-01 15:29:39 +08:00
    很久以前我也想过把 sentry + eruda 结合起来, 没想到居然有人已经实现了, 而且看起来还很好用, 关注一下
    blucas01
        12
    blucas01  
    OP
       2023-12-01 16:07:48 +08:00
    @9ki 感谢支持 ❤️
    JenJieJu
        13
    JenJieJu  
       2023-12-01 18:37:08 +08:00
    RN 支持吗?
    blucas01
        14
    blucas01  
    OP
       362 天前
    @JenJieJu 不支持原生哦
    kingofzihua
        15
    kingofzihua  
       358 天前
    和 sentry 啥区别?
    blucas01
        16
    blucas01  
    OP
       358 天前
    @kingofzihua sentry 是事后分析,PageSpy 是实时调试。
    xiaojun996
        17
    xiaojun996  
       338 天前
    看起来不错,顶一下🆙
    sdrpsps
        18
    sdrpsps  
       338 天前
    试用了一下,很不错。如果能自定义图标大小位置就更好了😁
    jiakeshan
        19
    jiakeshan  
       338 天前
    Good !真的很方便,群满了,方便拉一下吗? vv: enNoeGppYWtlbGFvMTIz
    blucas01
        20
    blucas01  
    OP
       338 天前
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2789 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 12:47 · PVG 20:47 · LAX 04:47 · JFK 07:47
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.