V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
推荐关注
Meteor
JSLint - a JavaScript code quality tool
jsFiddle
D3.js
WebStorm
推荐书目
JavaScript 权威指南第 5 版
Closure: The Definitive Guide
surunzi
V2EX  ›  JavaScript

Eruda 2.0 发布:移动端调试工具

  •  
  •   surunzi · 2020-01-10 13:40:21 +08:00 · 3394 次点击
    这是一个创建于 1540 天前的主题,其中的信息可能已经有所发展或是发生改变。

    Eruda 2.0 发布:移动端调试工具

    Eruda 移动端调试工具在 1.5.4 版本发布后有长达半年多的时间暂停了更新,于今年下半年重新投入精力开发,主要针对之前被诟病较多的 console 性能进行了优化,同时也对工具的整体外观做了一定调整,到现在终于成功发布了 2.0 版本。那么,新版本相对于之前做了哪些更新呢?

    截图

    支持辅助函数

    Chrome Devtools 在 console 面板执行代码时可以使用一些控制台才有的辅助函数,比如常见的 $ 选择函数,copy 复制,$0 引用被选中元素等。Eruda 也支持了部分方法,包括 copy、$、$$、$x、clear、dir、table、keys,以及 $0-$4 元素访问。

    console.group 支持

    Eruda 早期版本已经支持了大部分的 console 对象方法,但还存在个别支持方法不可使用。除 profile、profileEnd 等方法无法实现外,新版本的 Eruda 基本上已经支持了 console 对象上的全部方法,包括分组功能。同时,早期实现的 table、样式打印存在的一些问题也一一进行了修正。目前支持的完整 console 方法列表如下:log, error, info, warn, dir, time/timeLog/timeEnd, clear, count/countReset, assert, table, group/groupCollapsed/groupEnd

    异步渲染

    旧版本的 Eruda 在你执行 console.log 时会同步将结果渲染到页面上,这会导致程序执行卡顿。比如执行 for (let i = 0; i < 1000; i++) console.log(i) 这段代码,你会发现在使用 eruda 时其耗时相当严重。使用新版 Eruda,只要开启异步渲染(默认开启)就基本不会影响到代码的执行速度,也不会让页面卡住无法使用。当然,在执行完代码后,你才会看到工具上分步将日志打印出来。

    内存优化

    由于对每条日志存储了原始的 html 字符串,旧版本在打印大量日志时会导致内存爆涨使页面 crash。新版日志信息仅保存渲染后的 dom 结点,内存占用相比之前减少 50% 以上。

    渲染优化

    日志打印多时会形成一个很长的列表,因为 dom 对象太多,滚动时会变得十分卡。这里运用了常见的长列表优化技巧,只渲染可视区域的日志,极大优化了在长列表下的滚动性能,实测打印 1 万条日志内存占用及流畅度都在可接受范围内。

    主题

    为了让开发者使用时更接近 Chrome 调试工具的体验,新版本采用了与 DevTools 相近的外观配色,还提供了暗色主题(在设置面板里可选)。不仅如此,Eruda 还加入了多个经典主题配色,比如 Monokai 等,可根据自己喜好调整外观。

    Eruda 自 2016 年发布 1.0 版本后,已经过了 3 年多的时间,未来会继续更新维护,欢迎大家使用。

    PS:如果有问题或建议,可以到仓库 issue 页进行反馈:)

    14 条回复    2020-01-14 15:29:14 +08:00
    del1214
        1
    del1214  
       2020-01-10 13:41:57 +08:00
    支持一下
    zchub
        2
    zchub  
       2020-01-10 13:49:54 +08:00
    👍
    xxyang
        3
    xxyang  
       2020-01-10 16:33:08 +08:00
    什么时候支持在电脑上调试手机页面
    zhw2590582
        4
    zhw2590582  
       2020-01-10 16:35:40 +08:00
    一直都在用,终于更新了
    surunzi
        5
    surunzi  
    OP
       2020-01-10 16:42:05 +08:00
    @xxyang 能电脑连手机的情况请考虑 chrome inspect,safari 远程,weinre 之类的工具。
    zhangkui
        6
    zhangkui  
       2020-01-10 16:42:21 +08:00
    666
    cuzfinal
        7
    cuzfinal  
       2020-01-10 19:53:05 +08:00 via Android
    666,之前就发现颜色变了
    dream4ever
        8
    dream4ever  
       2020-01-10 20:59:08 +08:00
    支持支持,之前对比过腾讯的 vConsole 和你的 Eruda,记得有些方面你的还是比 vConsole 更好的,现在是两个都在用,哈哈。
    molvqingtai
        9
    molvqingtai  
       2020-01-10 21:06:10 +08:00 via Android
    赞,一直在用
    saymoon
        10
    saymoon  
       2020-01-10 21:06:58 +08:00
    好用,支持新版
    TargaryenChen
        11
    TargaryenChen  
       2020-01-11 08:52:43 +08:00
    赞 很好用
    nttisthebest
        12
    nttisthebest  
       2020-01-11 15:23:15 +08:00
    腾讯也出了一个 vconsolelog
    surunzi
        13
    surunzi  
    OP
       2020-01-13 17:14:04 +08:00
    @nttisthebest eruda 目前除了体积外,应该没有什么地方不如 vconsole 了才对。
    XiongAmao
        14
    XiongAmao  
       2020-01-14 15:29:14 +08:00
    @surunzi 大佬好,看到大佬发的新版本,这两天做了一个 Eruda 的 Vue CLI Plugin
    欢迎大家试用: https://github.com/XiongAmao/vue-cli-plugin-eruda
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2856 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 13:13 · PVG 21:13 · LAX 06:13 · JFK 09:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.