Eruda 移动端浏览器调试工具技术调研

Eruda 是功能丰富的移动端 Web 调试工具，提供 Console、Elements、Network、Resources、Sources、Snippets 等面板，UI 与桌面 DevTools 更接近，是 vConsole 的主要开源替代之一，适合需要在真机上进行较深程度 Web 调试的场景。

一、 基本信息

二、 技术定位与简介

Eruda 通过脚本注入在页面内渲染完整调试 UI，支持：

• 多 Tab 面板（Console、Elements、Network 等）。
• 可拖拽、缩放调试窗口。
• 插件机制扩展功能。
• 单独引入子模块减小体积（eruda-console 等）。

三、 快速上手安装说明

pnpm add eruda

if (import.meta.env.DEV) {
  import('eruda').then((eruda) => eruda.default.init())
}

CDN：

<script src="https://cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init()</script>

四、 核心特性

• Elements 面板支持 DOM 树与样式查看。
• Network 记录 XHR/Fetch。
• Sources 简易脚本查看。
• Snippets 执行自定义脚本。
• 模块化按需加载。

五、 适用场景

适合：移动端深度 H5 调试、无 USB 的测试环境、需要比 vConsole 更强 DOM/Network 能力。

不适合：生产长期开启、原生 App 调试、桌面开发。

六、 技术亮点

面板功能比 vConsole 更全；模块化加载平衡体积；开源活跃。

七、 技术局限与边界

1. 包体积大于精简版 vConsole。
2. 生产安全风险同 vConsole。
3. 性能分析能力有限。
4. 部分面板在弱网 WebView 中卡顿。

八、 生态地图

vConsole、weinre、Charles、Whistle 互补或替代。

九、 生态集成

可按需 eruda.init({ tool: ['console', 'network'] }) 限制面板；与 webpack/vite 条件编译配合。

十、 开发与工程化

开发环境默认启用；预发通过 query 或 localStorage 开关；生产 tree-shake 移除 init 代码。

十一、 性能与安全

生产禁止默认加载；Snippets 面板勿执行不可信代码；Network 可能暴露敏感 header。

十二、 技术对比

十三、 最佳实践

1. 按需加载子模块控制体积。
2. 与 vConsole 二选一，避免重复注入。
3. 测试账号专用开关。
4. 关键 bug 配合桌面 Chrome 远程调试复现。
5. 文档化测试人员 Eruda 开启方式。

十四、 学习与社区资源

• GitHub：https://github.com/liriliri/eruda
• Demo：官方在线 demo 页

十五、 总结

Eruda 适合需要更强移动端 DevTools 体验的团队，在 vConsole 与桌面远程调试之间取得平衡，同样需严控生产环境暴露。