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

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

截图.jpg

支持辅助函数

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

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/groupEndgithub

异步渲染

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

内存优化

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

渲染优化

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

主题

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

Eruda 自 2016 年发布 1.0 版本后,已通过了 3 年多的时间,将来会继续更新维护,欢迎你们使用。chrome-devtools

PS:若是有问题或建议,能够到仓库 issue 页进行反馈:)函数

相关文章
相关标签/搜索