企业官网建设流程全解析

• 前端
• 开发工具
• 调试器

Eruda（Console for Mobile Browsers）是一个专为移动端浏览器打造的调试面板工具，无需连接 PC 即可在手机页面上直接查看日志、审查 DOM、监控网络请求并执行 JavaScript。本文以仓库 README.md 为主线，结合 src/eruda.js、src/DevTools/DevTools.js 等源码实现，讲解 Eruda 的安装接入、初始化配置、内置面板、公开 API 与自定义插件机制，帮助你将其作为移动端调试基础设施直接落地到真实项目。

Eruda 是什么

Eruda 是一个运行在浏览器端、体积小巧的调试工具库，与桌面浏览器中的 DevTools 类似，但面向的是移动端浏览环境。其核心定位（项目自身描述）就是一句话："Console for Mobile Browsers"。它不需要开发机、不需要 USB 连接、不需要额外的转发服务，只要在页面里引入一段脚本并调用eruda.init()，即可在手机上直接打开一套完整的调试界面。

从仓库目录结构看，Eruda 的源码由一系列彼此独立的功能模块组成，每个模块对应一个调试面板：

• src/Console/Console.js：控制台面板，捕获与展示日志、执行 JavaScript
• src/Elements/Elements.js：元素检查面板
• src/Network/Network.js：网络请求监控面板
• src/Resources/Resources.js：本地存储、Cookie、脚本、样式、图片等资源面板
• src/Sources/Sources.js：源码查看面板（对象、HTML、JS、CSS）
• src/Info/Info.js：页面信息面板，默认展示页面 URL 与浏览器 UA
• src/Snippets/Snippets.js：代码片段面板，可注册并多次触发小函数
• src/Settings/Settings.js：设置面板，统一管理所有工具的配置项

这些面板在初始化时由 src/eruda.js 统一装配到 DevTools 容器中（见下文"初始化流程"）。

快速安装与接入

通过 npm 安装

Eruda 已发布到 npm，仓库 package.json 中记录的当前版本为3.4.3，main字段指向构建产物eruda.js。在项目中使用时，将其作为开发依赖安装：

npm install eruda --save-dev

随后在页面中引入构建产物并初始化：

<script src="node_modules/eruda/eruda.js"></script> <script> eruda.init() </script>

eruda.init()是 Eruda 的唯一入口，调用后它会自动在页面中创建入口按钮（Entry Button）和调试面板容器。

通过 CDN 引入

如果不想在构建链路中引入，也可以直接在 HTML 中通过 jsDelivr 加载（README 中提到的 cdnjs 同样可用）：

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

这种方式适合临时调试、线上问题排查或快速 Demo 场景，无需任何构建步骤。README 还提供了一份二维码形式的在线 Demo（eruda.liriliri.io），可以用手机扫码直接体验效果。

init 初始化配置解析

eruda.init()接收一个可选的配置对象。在 src/eruda.js 中可以看到其完整的参数解析逻辑，结合 eruda.d.ts 中的类型定义，各参数含义如下：

其中defaults里的三项全局设置，与 src/DevTools/DevTools.js 中的默认配置对应：

• transparency：面板透明度，取值0~1，默认1（完全不透明）；
• displaySize：面板显示高度百分比，取值40~100（设置面板中的滑杆范围即为此区间，见 src/DevTools/DevTools.js），默认80；
• theme：主题，默认'System preference'（跟随系统深色模式，见 src/DevTools/DevTools.js），可指定内置主题名。

示例：初始化时只启用控制台与网络面板，并自定义默认设置：

eruda.init({ tool: ['console', 'network'], defaults: { transparency: 0.9, displaySize: 60, theme: 'Dark' } })

初始化流程源码解读

从 src/eruda.js 可以看出init()内部依次执行：

1. _initContainer(container, useShadowDom)：创建容器，建立 Shadow DOM（如启用）并注入所有 UI 组件所需样式（icon.css、luna-*系列组件样式等，见 src/eruda.js）；
2. _initStyle()：通过evalCss工具将 SCSS/CSS 编译产物注入容器；
3. _initDevTools(defaults, inline)：创建 DevTools 主界面（tab 栏、工具区、resizer、通知与弹窗容器，见 src/DevTools/DevTools.js）；
4. _initEntryBtn()：创建可拖动的悬浮入口按钮，点击后切换面板显隐（src/eruda.js）；
5. _initSettings()：创建 Settings 面板并把它注册为第一个工具；
6. _initTools(tool)：按tool参数逐个实例化并添加内置面板；
7. _registerListener()：注册缩放、增删工具等事件监听。

另外值得一提的是init()内部有_isInit防重复初始化判断（src/eruda.js）：重复调用会被直接忽略，而调用destroy()后可以再次init()。

内置面板能力一览

Eruda 默认提供了七个功能面板，覆盖移动端调试的主要场景。

Console 控制台

控制台面板是所有调试工作的核心。它通过overrideConsole()包装window.console（逐方法代理log/info/warn/error等，见 src/Console/Console.js），同时在模块加载时通过uncaught.start()启动全局错误捕获。面板提供以下能力：

• 日志级别筛选：All / Info / Warning / Error 一键切换（模板见 src/Console/Console.js）；
• 内置 JS 执行输入框，可临时执行任意 JavaScript 表达式；
• catchGlobalErr()/ignoreGlobalErr()控制是否捕获全局错误；
• filter(pattern)支持用字符串、正则表达式或函数自定义日志过滤（src/Console/Console.js）；
• html(htmlStr)直接向控制台输出 HTML 内容。

通过 eruda.d.ts，可看到 Console 面板可配置项还包括：asyncRender（异步渲染）、jsExecution（JS 执行开关）、displayExtraInfo（显示额外信息）、displayUnenumerable（显示不可枚举属性）、displayGetterVal（显示 getter 求值结果）、lazyEvaluation（点击时才求值）、displayIfErr（出错时自动弹出）与maxLogNum（最大日志条数）等。这些配置在 src/Console/Console.js 中被逐一映射到 LunaConsole 组件的初始化选项中。

Elements 元素检查

Elements 面板用于检查 DOM 元素状态，支持查看元素的属性、样式、事件监听等信息，并可通过select(el)指定要展示的元素。可配置项为overrideEventTarget（捕获事件监听器）与observeElement（自动刷新），见 eruda.d.ts。

Network 网络监控

Network 面板用于展示页面发起的网络请求，提供clear()清空请求记录、requests()获取请求数据数组的编程接口（eruda.d.ts）。配合日志面板，可以快速定位移动端页面"发请求失败""接口返回异常"类问题。

Resources 资源面板

Resources 面板集中管理浏览器存储与页面资源，覆盖localStorage、sessionStorage、Cookie、脚本（Scripts）、样式表（StyleSheets）与图片（Images）（类型说明见 eruda.d.ts）。源码层面由 src/Resources/Storage.js、src/Resources/Cookie.js 等模块分别实现各类资源的读写与展示。可配置项包括hideErudaSetting（是否隐藏 Eruda 自身设置项）与observeElement（自动刷新）。

Sources 源码查看

Sources 面板用于查看对象、HTML、JS、CSS 等内容，可配置showLineNum（显示行号）、formatCode（美化代码）、indentSize（缩进大小），见 eruda.d.ts。

Info 页面信息

Info 面板默认展示页面 URL 与浏览器 UA，方便上报用户环境信息。它提供add(name, content)添加自定义信息（content 可以是字符串或函数）、get(name)读取、remove(name)删除、clear()清空等接口（eruda.d.ts）。

Snippets 代码片段

Snippets 面板允许注册可重复触发的小函数，例如常用的调试脚本。通过add(name, fn, desc)注册、run(name)手动运行、remove(name)删除（eruda.d.ts）。

核心 API：编程化控制 Eruda

初始化之后，Eruda 暴露了一组全局 API，全部定义在 src/eruda.js 中，并带有链式调用返回（return this）：

典型用法示例：

// 打开并切换到网络面板 eruda.show('network') // 获取 Console 实例并输出一条日志 eruda.get('console').log('hello eruda') // 移动入口按钮到页面左上角 eruda.position({ x: 10, y: 10 }) // 将界面整体放大 1.2 倍 eruda.scale(1.2)

自定义工具（Plugin）机制

Eruda 的工具系统是其可扩展性的根基。任何工具实例只需满足四个生命周期方法即可被eruda.add()接纳。基类定义在 src/DevTools/Tool.js 中：

init($el) // 工具被添加时调用，$el 是用于展示内容的容器元素 show() // 切换到该面板时调用，通常只需显示容器 hide() // 切换到其他面板时调用，至少需要隐藏容器 destroy() // 通过 eruda.remove('name') 移除时调用

同时每个工具必须有一个唯一的name属性，它会显示在顶部 Tab 栏中；没有name的工具会被拒绝添加（见 src/DevTools/DevTools.js）。

eruda.add()还做了容错处理：如果传入的不是Tool实例，会用默认实现补齐缺失的生命周期方法（defaults(tool, { init, show, hide, destroy })，见 src/DevTools/DevTools.js）。因此你可以用一个普通对象快速注册一个最小工具：

eruda.add({ name: 'my-tool', init($el) { $el.html('<h1>My Tool</h1>') } })

更完整的类型约束可参考 eruda.d.ts 中Tool/ToolConstructor接口定义。

基于 Settings 的自定义配置项

自定义工具还可以把配置项注入到 Settings 面板。Settings 工具本身提供了一套链式 API（实现在 src/Settings/Settings.js 中）：

• settings.switch(config, key, desc)：添加布尔开关；
• settings.select(config, key, desc, selections)：添加下拉选择；
• settings.range(config, key, desc, { min, max, step })：添加数值滑杆（默认min=0, max=1, step=0.1）；
• settings.button(text, handler)/settings.separator()/settings.text(text)：添加按钮、分隔符与文本。

配置数据通过Settings.createCfg(name, data)（src/Settings/Settings.js）创建，底层基于LocalStore（localStorage），因此配置会自动持久化。所有eruda-前缀的配置项都可以在 Settings 面板"Restore defaults and reload"按钮中被一键清空（见 src/DevTools/DevTools.js）。

eruda.util中还暴露了一些对插件开发有用的辅助能力（src/eruda.js）：evalCss(css)注入样式、isDarkTheme(theme)判断主题是否深色、getTheme()获取当前主题名。

主题、缩放与样式隔离的实现细节

Eruda 在移动端高 DPI 与自定义 viewport 场景下的可用性，依赖于两个底层机制：

样式隔离：默认启用 Shadow DOM（useShadowDom: true）。在_initContainer中，Eruda 将整个界面放入attachShadow({ mode: 'open' })创建的 Shadow Root，并把样式注入 Shadow Root 内（src/eruda.js）；同时容器自身设置style.all = 'initial'，最大限度避免页面与调试工具间的样式串扰。若浏览器不支持 Shadow DOM，则降级为普通子容器。

自动缩放：当autoScale: true且处于移动端时，Eruda 根据viewportScale()计算1 / viewportScale作为缩放因子（src/eruda.js）。缩放最终通过 src/lib/evalCss.js 的setScale生效：该工具会把注入的所有样式中Npx单位按比例换算（css.replace(/(\d+)px/g, ...)），从而保证在缩小 viewport 的页面上界面仍然清晰、可点击。

主题切换同样由evalCss支撑：setTheme(theme)会将样式中的var(--xxx)主题变量替换为具体色值（见 src/lib/evalCss.js），内置主题列表定义在 src/lib/themes.js 中。

相关项目与第三方生态

README 中列出了围绕 Eruda 形成的配套项目与社区插件，理解它们有助于选型完整的调试方案：

• 官方配套：eruda-android（自动加载 Eruda 的简易 WebView）、chii（远程调试工具）、chobitsu（Chrome DevTools 协议的 JavaScript 实现，Eruda 的 Network/Sources 等面板依赖它，见 src/lib/chobitsu.js）、licia（Eruda 使用的通用工具库）、luna（Eruda 使用的 UI 组件库）、vivy（图标生成工具）；
• 第三方插件：eruda-pixel（UI 像素级还原工具）、eruda-webpack-plugin（Webpack 集成插件）、eruda-vue-devtools（Vue 开发工具插件）。

这些项目仅作为生态参考，Eruda 本身不依赖它们也能独立工作。

本地开发与贡献

README 末尾指向了 Contributing Guide 了解开发环境配置。从 package.json 的 scripts 中可以还原出一套完整的本地开发链路：

npm run dev # 启动 webpack-dev-server，默认监听 0.0.0.0，便于手机访问调试 npm run lint # ESLint 代码检查（npm run lint:fix 自动修复） npm test # 通过 Karma 运行测试（karma.conf.js 配置） npm run build # 构建产物（webpack 生产构建 + polyfill 构建 + 拷贝 README 与 d.ts 到 dist） npm run ci # 完整 CI 链路：lint → test → build → es5 兼容性检查

测试用例位于 test/ 目录，例如 test/console.js、test/network.js 分别对应各面板的行为验证；仓库内还提供了 test/eruda.html、test/manual.html 等可直接在浏览器中打开的手动验证页面。

小结

Eruda 以"移动端浏览器里的 DevTools"为设计目标，通过一个入口按钮承载了控制台、元素、网络、资源、源码、信息、代码片段七个调试面板，并提供了init参数化的按需装配、add/remove驱动的插件扩展、scale/position等精细控制 API。本文结合 src/eruda.js 的初始化流程、src/DevTools/DevTools.js 的工具管理机制、src/lib/evalCss.js 的样式缩放与主题实现，还原了这些能力背后的源码级原理。无论你只是想快速给移动端页面加一个调试入口，还是希望在 Eruda 之上构建自己的调试工具面板，上述接入方式与 API 都足以支撑实际落地。

• 前端
• 开发工具
• 调试器