Skip to content

eruda-plus 功能简介

eruda-plus 是在 eruda 基础上进行全方位增强的移动端网页调试台。它保留了 eruda 轻量、零配置、一行脚本即可接入的优点,同时把界面、交互与功能全面对齐到 Chrome DevTools 的水准。对于需要在手机、平板或 WebView 环境中排查问题的前端工程师来说,它让「移动端调试」第一次拥有了与桌面端相同的工作流。

与原版 eruda 相比,eruda-plus 的增强集中在三个层面。第一是视觉与交互:全部面板采用 DevTools 官方设计语言重绘,亮色与暗色主题都使用 Chrome 的官方配色,等宽字体、表格密度、滚动条样式与指示条等细节都经过逐像素对照。第二是中英双语:所有面板标题、表头、时序段、弹窗按钮、提示文案都内置了翻译,默认跟随系统语言,也可以在设置中手动切换,切换即时生效、无需刷新页面。第三是网络能力:网络面板几乎被重写,新增了请求屏蔽、URL 重写、响应 Mock、弱网节流、HAR 导入导出、Initiator 来源追踪等 DevTools 级能力。

适用场景

  • 移动端问题排查:用户反馈「页面上有报错」,但你无法复现?让他们打开 eruda-plus,截图控制台与网络面板即可。
  • WebView / 内嵌页调试:App 内嵌页面没有桌面 DevTools 的远程调试条件时,eruda-plus 是最快的兜底方案。
  • 弱网与故障演练:通过节流与 Mock 模拟慢速接口、500 错误、断网等真实故障,验证页面的降级与容错。
  • 接口联调:临时屏蔽某个第三方请求、把测试环境 URL 重写为本地代理,无需改动任何业务代码。

面板一览

eruda-plus 内置九个面板,全部支持中英双语:

面板说明
Console 控制台日志分级筛选、对象预览、DevTools 式报错堆栈、Watch 监控、日志保留
Elements 元素DOM 树查看与搜索、CSS 查看、选择器/XPath 复制、事件监听捕获
Network 网络请求列表、瀑布图、屏蔽/重写/Mock/节流、HAR、cURL 复制、Initiator
Resources 资源Local/Session Storage、Cookie、iframe 框架清单
Sources 源码页面 HTML、脚本与样式源码查看、行号显示
Info 信息设备、系统、浏览器、页面、时间等运行环境信息
Snippets 代码片段常用调试脚本一键执行
Settings 设置主题、语言、透明度、各面板行为开关
EntryBtn 悬浮球可拖动的入口按钮,支持透明度与尺寸调节

核心特点

  • 零构建接入:CDN 一行脚本或 npm 一条命令即可使用,无需修改构建配置。
  • 双语即切即用:语言切换通过设置回放机制实现,所有已渲染面板即时更新。
  • DevTools 式报错:未捕获异常与 Promise 拒绝自动标注 Uncaught / Uncaught (in promise) 前缀,堆栈默认展开,每一帧都可点击跳转到源码并高亮对应行。
  • 网络全链路:从请求发出到响应结束,拦截、改写、模拟、限速、导出在同一个面板内闭环完成。
  • 开源开放:基于 MIT License,代码托管于 GitHub,欢迎参与贡献。

下一步

基于 MIT License 许可发布