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

[surunzi]

Eruda 移动端调试工具距 2.0.0 版本发布已经过了三年的时间，其中在 2.4.1 版本发布后有接近两年的时间因工作生活繁忙暂停了更新，直到去年下半年才重新投入精力开发，最近终于成功发布了 3.0 版本。从 2.0 到 3.0 版本，主要做了以下一些更新。

内部组件抽离

为更好地开发和复用组件，Eruda 中绝大部分可复用组件均已抽离至 Luna UI 组件库中进行更新维护，这其中就包括了完整的 console 实现、DOM 树展示高亮等。这些组件不依赖特定的前端框架，可以直接引入使用。比如前段时间写过的一个 vscode 配置可视化插件，就是跟 eruda 引用了相同的设置面板组件。

桌面端适配

Eruda 一直都是针对移动端进行功能设计的，在 PC 场景上都是推荐使用浏览器自带的调试工具。后面发现在桌面浏览器其实也会有人使用该工具，主要是一些在线写代码的工具，比如 replit 和 Solid Playground。因此，新版本针对 PC 端做了适当优化，包括移除横向滚动条，鼠标替代触摸操作以及大屏下 Elements 和 Network 面板进行分屏展示等。当然，如果你不考虑浏览器兼容性，仅支持 Chromium 系浏览器，推荐使用 Chii，它可以让你直接使用 Chrome 的调试器，更符合桌面端的使用习惯，点此可以查看示例效果。

DOM 插件内置

旧版本的 Elements 面板考虑到移动端操作不便，并不提供 DOM 树的展示功能，相关功能抽离成插件形式进行提供。鉴于 DOM 插件引入的频率较高，新版本将其进行内置，同时做了一些更新，比如节点自动更新，无需对节点进行重新展开来刷新子树。此外，console 面板也可以直接打印出可交互的 DOM 树结构。

功能更新

除了上边说的几项，新版本对各个面板功能都进行了一定的优化。比如反馈最多的复制功能，所有面板都在合适的地方添加一键复制的按钮，console 面板可以复制日志，elements 面板可以复制节点，network 面板可以复制为 cURL 等。插件部分也进行了必要的更新，原有的 fps 和 memory 插件合并成为一个新的 monitor 插件。具体其它更新细节可以在每个版本的更新日志中查看。

体积优化

新版本在增加了功能的同时，体积相对于 2.0.0 版本（ 452 KB ）基本不变（ 441 KB ），gzip 后仅 118 KB 。除了将占用体积巨大，性价比较低的代码格式化库移除外，Eruda 目前仅引用一个 Licia JS 工具库和 Luna UI 组件库，严格控制第三方库的引入，使体积保持在可接受的范围内。

不知不觉，自 2016 年初发布第一个版本后已经过了 7 年的时光，未来会继续更新维护，欢迎大家使用。

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

[lopssh]

支持一次。

[debuggerx]

感谢大佬，之前写 SB 的微信项目时用过，简直是救命神器

[iulo]

很棒的库

[Parva]

你们还用 hybrid 开发移动端 app 嘛？

[HiCode]

用了好多年，默默点赞！！！

[soya2]

狠狠的点赞，在移动端和微信下太有用了