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 的调试器,更符合桌面端的使用习惯,点此可以查看示例效果。
旧版本的 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 页进行反馈:)
1
lopssh 2023-04-05 11:21:37 +08:00 via Android
支持一次。
|
2
debuggerx 2023-04-05 11:32:59 +08:00
感谢大佬,之前写 SB 的微信项目时用过,简直是救命神器
|
3
iulo 2023-04-05 17:35:48 +08:00
很棒的库
|
4
Parva 2023-04-05 18:44:03 +08:00
你们还用 hybrid 开发移动端 app 嘛?
|
5
HiCode 2023-04-05 22:30:12 +08:00
用了好多年,默默点赞!!!
|
6
soya2 2023-04-06 10:01:45 +08:00
狠狠的点赞,在移动端和微信下太有用了
|