ESPConnect 是一个基于浏览器的 ESP32 和 ESP8266 系列开发板控制中心。它完全在现代 Chromium 浏览器中运行,无需安装桌面软件即可检查硬件详情、管理 SPIFFS/LittleFS/FATFS 文件、备份 Flash 和部署固件。本项目基于 Jason2866 的 WebSerial ESPTool。
本中文版采用了一套最低限度侵入的翻译系统,仅需在 main.js 中添加两行代码:
import { initI18n } from './i18n/index.js';
initI18n();
| 特性 | 说明 |
|---|---|
| ✅ 最少修改 | 不修改 Vue 组件源代码,原项目更新时只需同步翻译文件 |
| ✅ 实时翻译 | 基于 MutationObserver 监听 DOM 变化,自动翻译动态内容 |
| ✅ 中英切换 | 支持一键切换中英文界面,切换按钮位于工具栏 |
| ✅ 专业术语 | 翻译遵循 ESP32/嵌入式开发领域的专业术语规范 |
| ✅ 易于维护 | 所有翻译集中在 src/i18n/ 目录,便于更新和扩展 |
┌─────────────────────────────────────────────────────────────┐
│ Vue 应用渲染 DOM │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ MutationObserver 监听 DOM 变化 │
│ • childList: 新增节点 │
│ • characterData: 文本内容变化 │
│ • attributes: placeholder/title/aria-label 等属性变化 │
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
│ 翻译引擎处理流程 │
│ 1. 检查是否应跳过(芯片型号、十六进制地址、版本号等) │
│ 2. 精确匹配:translations 字典查找 │
│ 3. 正则匹配:regexTranslations 模式匹配 │
│ 4. 替换文本节点或属性值 │
└─────────────────────────────────────────────────────────────┘
src/i18n/
├── index.js # 翻译引擎核心(MutationObserver、翻译逻辑、语言切换)
└── translations.js # 翻译字典(静态翻译 + 正则翻译 + 跳过规则)
在 translations.js 的 translations 对象中添加:
export const translations = {
// 格式:'英文原文': '中文翻译'
'Device Info': '设备信息',
'Connect': '连接',
'Disconnect': '断开连接',
// ... 添加更多
};在 regexTranslations 数组中添加:
export const regexTranslations = [
// 格式:{ pattern: 正则表达式, replacement: 替换文本 }
{
pattern: /^(\d+)\s+files?$/,
replacement: '$1 个文件'
},
{
pattern: /^Active slot:\s*ota_(\d+)$/,
replacement: '当前启动分区: ota_$1'
},
// ... 添加更多
];在 skipPatterns 数组中添加:
export const skipPatterns = [
/^ESP32/i, // ESP 芯片型号
/^0x[0-9A-Fa-f]+$/, // 十六进制地址
/^v?\d+\.\d+/, // 版本号
// ... 添加更多
];当原版 ESPConnect 更新时:
- 拉取原项目最新代码
- 保留
src/i18n/目录和src/main.js中的导入语句 - 检查是否有新增的英文文本需要翻译
- 运行测试确保翻译正常工作
- Chrome、Edge、Brave、Arc 或其他基于 Chromium 89+ 的浏览器
- ESP32、ESP32-C3、ESP32-S2、ESP32-S3、ESP32-C6、ESP32-H2、ESP32-C5、ESP32-P4 或 ESP8266 开发板
- 带数据线的 USB 连接线(如果开发板没有自动复位电路,应用会引导您手动进入 Bootloader 模式)
- 打开(官方英文版) ESPConnect - Original Website None Translated
或打开中文版网页 中文网页 - Chinese Website - 点击 连接,在浏览器弹出的对话框中选择您的设备
- 握手完成后,导航栏将解锁所有工具:设备信息、分区表、SPIFFS、应用、烧录工具、串口终端和日志
- 需要释放 USB 端口给其他应用时,点击 断开连接
- 设备信息页 – 实时显示芯片系列、版本、MAC 地址、Flash 大小、晶振频率、功能特性等。未连接设备时自动显示"未连接设备"卡片
- 分区表页 – 图形化分区映射和详细的分区表,包括大小、偏移地址和未使用的 Flash 空间,便于在烧录前检查布局
- 浏览文件,支持即时文本过滤和分页控制
- 通过文件选择器或拖放上传;应用会检查可用空间并阻止超大文件传输
- 运行完整文件系统备份、恢复镜像或格式化分区(确认备份后)
- 本地暂存编辑,满意后点击 写入 Flash 提交更改
- 预览 UTF-8 文本(JSON、HTML、日志等)、内联渲染图片、播放 MP3、WAV、OGG/Opus、AAC/M4A、FLAC 和 WebM 等音频格式——无需离开浏览器
- 下载或删除单个文件,监控使用量仪表显示已用、空闲和总字节数
- 应用页 – 查看应用分区/OTA 分区。显示当前活动分区及构建元数据、大小等详细信息,让您始终了解当前运行的固件和下一个待启动的固件
- 烧录固件 – 加载任意
.bin文件,从常用偏移地址预设中选择,可选择擦除整片芯片,通过详细对话框查看进度 - 备份与下载 – 捕获单个分区、整个分区表、仅已使用的 Flash 区域或您指定的任意区域
- 完整性检查 – 提供偏移地址和长度计算 MD5 哈希值,快速验证设备上存储的内容
- 寄存器访问 – 使用集成的地址和描述指南直接读写硬件寄存器
- 控制操作 – 取消长时间传输、停止备份、擦除 Flash 或保存暂存的 SPIFFS 更改,具有清晰的确认和进度指示
- 串口终端页 – 流式传输 UART 输出、发送命令、清空终端、更改波特率或直接从浏览器重置开发板
- 会话日志页 – 连接、烧录、下载和警告的时间顺序记录。随时清空以获得干净的状态
ESPConnect 包含一个实验性 NVS 检查器,让您可以直接在浏览器中读取和可视化 ESP32 的 NVS(非易失性存储)分区内容。
功能特性
- 自动检测 NVS 格式(v1 / v2)
- 列出命名空间和键
- 解码常见值类型(整数、字符串、二进制数据)
- 启发式解码浮点数和双精度浮点数
- 显示页面状态、序列号、CRC 状态和条目使用情况
- 可视化页面布局和占用率
限制条件
- 只读(不支持编辑或写入)
- 解析基于对 ESP-IDF 行为的逆向工程,可能无法处理所有边缘情况
- 某些值类型可能显示为原始二进制数据
- 损坏或部分擦除的页面可能产生警告
状态
⚠️ 此功能为实验性功能,仅用于检查和调试目的。
输出结果不应作为数据恢复或取证用途的权威依据。
欢迎提供反馈和测试报告。
- ESPConnect 当前通过基于 DOM 的翻译适配层支持社区翻译。该方案采用低侵入性设计,旨在快速实现语言支持,属于尽力而为的解决方案。它并非完整的国际化框架,用户界面文本变更可能需要更新翻译内容。
- 如果自动进入 Boot 模式失败,按住 BOOT,点按 RESET,继续按住 BOOT 同时点击 连接,看到 ESP-ROM 标识后松开
- 同一时间只有一个应用可以使用 USB 串口桥接。连接前请关闭 Arduino IDE、PlatformIO 或其他工具
- 连接后可以更改波特率。如果传输停滞,请降至 460800 或 115200 bps
- 取消烧录或下载会安全暂停。准备好后再次运行即可
ESP8266 设备可以连接,但支持非常有限。 该工具无法读取分区表或访问 SPIFFS/LittleFS,ESP32 上可用的高级功能未在 ESP8266 上实现。
ESPConnect 是一个纯浏览器端 Web 应用——无后端、无需安装,所有操作直接在浏览器中使用 Web Serial / WebUSB 进行。
请参阅最新发布版本中的安装说明
开发模式(推荐贡献者使用 - Electron 加载 Vite 开发服务器):
npm install
npm run dev
# 在另一个终端中:
npm run startgit clone https://github.com/thelastoutpostworkshop/ESPConnect.git
cd ESPConnect
npm install
npm run devdocker build -t espconnect .
docker run --rm -p 8080:80 espconnect步骤 1 — 构建应用
npm install
npm run build步骤 2 — 提供 dist/ 文件夹服务,您可以使用以下任一选项:
选项 A — Node "serve"
cd dist
npx serve .选项 B — Python 3
cd dist
python -m http.server 8080ESPConnect 完全在您的浏览器中运行——没有后端、账户或遥测。固件文件、备份和诊断信息都保存在本地,只有在您自己下载时才会移动。请始终从可信来源烧录固件。
ESPConnect 基于 MIT 许可证发布。完整文本请参阅 LICENSE。
- 原版项目:ESPConnect by thelastoutpostworkshop
- 基础工具:WebSerial ESPTool by Jason2866
- 中文翻译系统:基于 MutationObserver 的无侵入式翻译方案 Powered by Claude Opus 4.5
