eruda-plus v0.1.1 · DevTools UI 保真度 / UI Fidelity

🇨🇳 中文

🎨 UI 保真度版本

以 devtools-frontend 官方源码为基准（design_system_tokens.css / networkLogView.css / NetworkOverview.js / NetworkWaterfallColumn.ts），把网络面板进一步对齐真实 Chrome DevTools。

✨ 变更

• 网络面板新增「时间线」（Waterfall）列：彩色分段按全局时间轴对齐（DNS 青 / 连接黄 / SSL 紫 / 等待绿线 / 下载蓝），失败请求整条红色——与 DevTools 同色系
• Overview 时间轴重写：3px 条带 / 5px 留白 / 最小 10px 条宽（DevTools 同款常量）
• Material 3 设计令牌：主色 #0b57d0、选中行 #d3e3fd、工具栏 #f1f4fa、正文 #1f1f1f、暗色选中 #004a77
• 数据网格密度：27px 表头 / 21px 行 / 12px 字号 / 1px 列分隔线 / 色调蓝选中态
• 筛选 Chip 重绘：无边框、选中态浅蓝胶囊
• 移除斑马纹（DevTools 无斑马纹）

🛠 修复

• 暗色主题下 luna 原生斑马纹穿透导致的白底白字问题

---

🇬🇧 English

🎨 UI Fidelity Release

Aligned the Network panel with the real Chrome DevTools using values taken
straight from the devtools-frontend
source (design_system_tokens.css / networkLogView.css / NetworkOverview.js /
NetworkWaterfallColumn.ts).

✨ Changed

• New Waterfall column in the request list: colored segments aligned to a
  global timeline (cyan DNS / yellow connecting / purple SSL / green waiting
  line / blue download), full red bar for failed requests
• Overview timeline rewritten with DevTools constants: 3px bands, 5px
  padding, 10px min band width
• Material 3 tokens: primary #0b57d0, selection #d3e3fd, toolbar
  #f1f4fa, text #1f1f1f, dark selection #004a77
• Data grid density: 27px header / 21px rows / 12px font / 1px column
  separators / tonal-blue selection
• Filter chips redrawn as borderless tonal pills
• Zebra stripes removed

🛠 Fixed

• White-on-white rows in dark theme caused by luna's native zebra color

---

📦 CDN: https://cdn.jsdelivr.net/gh/masgzy/eruda-plus@0.1.1/dist/eruda.js

eruda-plus v0.1.0 · 首个开源版本 / Initial Open-Source Release

🇨🇳 中文

🎉 首个开源版本

基于 eruda v3.4.3 深度增强，将 Chrome DevTools 的视觉与交互体验完整带入移动端网页调试。

✨ 新增 Added

Network 网络面板（对标 Chrome DevTools，借鉴 ProxyPin）

• DevTools 风格界面：工具栏、9 个快捷筛选 Chip、Overview 时间轴画布、七列可排序表格、迷你瀑布列、底部状态栏、680px 自动分屏
• 详情六页签：Headers / Payload / Preview（JSON 树）/ Response / Initiator（调用链）/ Timing（七段时序瀑布）
• 请求阻断（Block）：URL 黑名单（字面量 + /regex/），fetch 与 XHR 双通道拦截、模拟 403
• Rewrite 重写、Mock 响应（自定义 status / contentType / body）、网络节流（Slow 3G / Fast 3G / Offline）
• HAR 1.2 导入导出、Copy as fetch / cURL、正则搜索（支持 - 排除）、失败请求红色高亮、Preserve Log

全工具国际化（i18n）

• 覆盖 Console / Elements / Network / Resources / Sources / Info / Snippets / Settings 全部工具
• 默认跟随系统语言，设置中可切换中文 / English，即时生效、选择持久化

Console 控制台

• Live Expressions 实时表达式监控（1s 自动求值、错误红色高亮、点值跳转 Sources）
• 内联筛选框（/regex/ 正则 + 普通文本）、Preserve Log 刷新保留 300 条日志

Elements 元素面板

• DOM 搜索（选择器优先 + 全文降级、↑↓ 导航、x/y 计数）
• Copy selector / Copy XPath 一键复制

交付形态

• dist/eruda.js 增强完整版（单文件、零依赖）
• dist/eruda-network-plus.js 独立网络面板插件（挂在官方 eruda 上即可）
• patch/eruda-devtools-edition.patch 基于 v3.4.3 的 git apply 补丁
• 官网与在线演示：https://eruda.cc.cd

🎨 变更 Changed

• 全局设计令牌对齐 Chrome DevTools：亮 / 暗双主题、13px 基准字号、等宽数据字体栈、扁平弹窗、细滚动条
• 上游 17 套第三方主题兼容性不受影响

🛠 修复 Fixed

• 被阻断请求经 chobitsu 二次捕获导致的重复记录
• 跨域响应缺失 Timing-Allow-Origin 时时序降级为总时长
• fetch 拦截层参数透传错误导致的请求参数丢失

---

🇬🇧 English

🎉 Initial Open-Source Release

Deeply enhanced on top of eruda v3.4.3, bringing the full Chrome DevTools experience to mobile web debugging.

✨ Added

Network panel (Chrome DevTools style, inspired by ProxyPin)

• DevTools-style UI: toolbar, 9 filter chips, overview timeline canvas, 7-column sortable table with mini waterfall, status bar, automatic split view at 680px
• Six detail tabs: Headers / Payload / Preview (JSON tree) / Response / Initiator (call chain) / Timing (7-segment waterfall)
• Request blocking: URL blacklist (literal + /regex/) intercepting fetch and XHR with simulated 403
• Rewrite rules, mock responses (custom status / contentType / body), throttling (Slow 3G / Fast 3G / Offline)
• HAR 1.2 import / export, Copy as fetch / cURL, regex search with - exclusion, red highlighting for failed requests, Preserve Log

Global i18n for every tool

• Covers Console / Elements / Network / Resources / Sources / Info / Snippets / Settings
• Defaults to system language; switch 中文 / English in Settings instantly, choice persists

Console

• Live Expressions (1s auto evaluation, red error highlighting, click to inspect in Sources)
• Inline filter input (/regex/ + plain text), Preserve Log restoring 300 entries after reload

Elements

• DOM search (CSS selector first with full-text fallback, ↑↓ navigation, x/y counter)
• Copy selector / Copy XPath

Deliverables

• dist/eruda.js — enhanced full build (single file, zero dependencies)
• dist/eruda-network-plus.js — standalone network panel plugin for official eruda
• patch/eruda-devtools-edition.patch — git apply patch based on v3.4.3
• Website & online demo: https://eruda.cc.cd

🎨 Changed

• Global design tokens aligned with Chrome DevTools: light / dark themes, 13px base font, monospace data stack, flat modals, slim scrollbars
• All 17 upstream third-party themes keep working

🛠 Fixed

• Duplicated entries caused by chobitsu double-capturing blocked requests
• Timing info gracefully degrades to total duration when cross-origin responses lack Timing-Allow-Origin
• Lost request arguments caused by mis-forwarded arguments in the fetch interception layer

---

📄 MIT License · based on eruda by liriliri · not affiliated with Google Chrome / Chrome DevTools