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

[surunzi]

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 页进行反馈:)

[del1214]

支持一下

[zchub]

👍

[xxyang]

什么时候支持在电脑上调试手机页面

[zhw2590582]

一直都在用，终于更新了

[surunzi]

@xxyang 能电脑连手机的情况请考虑 chrome inspect，safari 远程，weinre 之类的工具。

[zhangkui]

666

[cuzfinal]

666，之前就发现颜色变了

[dream4ever]

支持支持，之前对比过腾讯的 vConsole 和你的 Eruda，记得有些方面你的还是比 vConsole 更好的，现在是两个都在用，哈哈。

[molvqingtai]

赞，一直在用

[saymoon]

好用，支持新版

[TargaryenChen]

赞 很好用

[nttisthebest]

腾讯也出了一个 vconsolelog

[surunzi]

@nttisthebest eruda 目前除了体积外，应该没有什么地方不如 vconsole 了才对。

[XiongAmao]

@surunzi 大佬好，看到大佬发的新版本，这两天做了一个 Eruda 的 Vue CLI Plugin
欢迎大家试用： https://github.com/XiongAmao/vue-cli-plugin-eruda