【RC3506平台】零安装串口调试终端 —— 浏览器即开即用，80+ 硬件调试命令全收录

基于 Web Serial API 的纯前端串口调试工具，单文件 HTML，零安装、零依赖。

支持虚拟终端 ANSI 转义序列解析、参数引导弹窗、连接状态指示、收发统计、日志一键保存。

配套资源：技术报告 Word 版、源码 serial_terminal.html

一、项目背景

睿擎 RC3506 平台调试过程中，传统串口助手（XCOM / Putty / SecureCRT）需要安装客户端，在不同电脑、不同操作系统之间切换时效率很低。开发一台没装串口助手的临时机器时，调试经常卡在”装软件”这一步。

为解决这个痛点，写了一个 纯前端的串口调试终端：

• 单文件 HTML，双击即可在 Edge / Chrome 浏览器中运行

• 调用浏览器原生 Web Serial API 直连串口设备

• 内置 15 类 80+ 条针对 RC3506 的硬件调试命令

• 支持虚拟终端 ANSI 转义序列（光标移动、清屏、颜色、闪烁）

整个工具源码不到 1500 行，无任何第三方依赖（含 UI、终端、协议层全自研）。

二、界面总览

工具主界面采用经典三段式布局：

┌─────────────────────────────────────────────────────────────┐

可拖拽中间分隔条自由调整左右比例，支持最小窗口宽度自适应。

三、核心功能详解

1. 零安装、即开即用

单 HTML 文件，双击打开即可使用

不依赖 Node.js、Python、任何运行时

浏览器原生 Web Serial API，USB 转串口免驱直连

支持 Edge / Chrome / Opera 等 Chromium 内核浏览器

支持 Windows / macOS / Linux（含国产 UOS、麒麟）

2. 虚拟终端（ANSI 转义序列解析）

完整支持 xterm 兼容的 ANSI 控制序列：

3. 15 类 80+ 条命令

涵盖 RC3506 全总线调试能力：

4. ⭐ 参数引导弹窗（特色亮点）

点击命令面板中的任意命令，弹出参数引导弹窗：

• 自动识别命令的参数定义（名称、默认值、格式提示）

• 实时拼装命令字符串预览，例如：

> i2c read -b 0 -a 0x50 -r 0x00 -l 16

• 支持多参数联动（如 -l 改变长度时实时更新十六进制预览）

• 数字 / 十六进制 / 字符串格式智能校验

• 确认后命令自动填入输入框并执行

这一项是相对传统 XCOM 串口助手最大的体验提升 —— 新人不必记命令格式。

5. 工具提示（Tooltip）

鼠标悬停命令条目时，弹出功能说明 tooltip：

• 命令用途

• 参数语义

• 返回值示例

• 关联命令推荐

例如悬停 ps 时提示：”列出所有线程：名称、优先级、状态、栈大小、CPU 占用”

6. 收发统计 & 状态指示

工具栏实时显示：

• 串口状态（已连接 / 已断开 / 连接中 / 错误）

• 已发送字节数 / 已接收字节数

• 当前波特率、数据位、停止位、校验位

• 错误计数（帧错误 / 校验错误 / 溢出）

7. 日志保存与历史回放

• 一键保存当前终端日志为 .txt 文件（含时间戳）

• 输入框支持 ↑ ↓ 翻看历史命令

• 命令历史可保存到 localStorage，跨会话保留

8. 分隔条拖拽自适应

• 鼠标拖拽命令面板与终端之间的分隔条

• 最小宽度限制，避免极端布局

• 自适应窗口缩放

四、实测性能数据

五、源码结构解析

源码组织为 6 大模块：

serial_terminal.html

核心代码片段 —— Web Serial 连接：

async function connectSerial() {

核心代码片段 —— ANSI 序列识别：

function parseANSI(buf) {

六、问题与解决方案

七、改进方向

功能增强

• 增加 XModem / YModem 文件传输支持

• 增加波形绘制（ADC 实时曲线）

• 增加 Lua 脚本批量执行

工程化

• 拆分为多文件模块（HTML / CSS / JS / 命令定义 JSON）

• 增加单元测试（命令解析、ANSI 解析）

• 增加 TypeScript 重构

兼容性

• 增加 WebSocket 桥接（支持远程调试）

• 增加 WebUSB 直连（非串口设备）

• 移动端响应式适配

八、适用场景

✅ 临时调试机（没装串口助手）

✅ 跨平台开发（Windows / Mac / Linux）

✅ 现场出差（U 盘拷个 HTML 就走）

✅ 教学演示（学生直接浏览器操作）

✅ 自动化测试（嵌入 iframe + JS 注入）

九、上手指南

1. 下载源码：serial_terminal.html（87 KB，单文件）

2. 浏览器打开：用 Edge 或 Chrome 双击

3. 连接设备：点击工具栏「连接」→ 选择 USB 串口

4. 输入命令：直接键入 help 回车，查看所有命令

5. 保存日志：调试完成后点「保存日志」按钮

浏览器版本要求：Edge 89+ / Chrome 89+（支持 Web Serial API）

十、附件

标签：#串口调试#WebSerial #嵌入式工具 #调试工具 #RT-Thread应用 #睿擎工业开发平台

💡 本项目源代码已开源，欢迎 PR 与 Issue。

📮 联系：项目内私信 / 邮箱见作者主页

网页串口终端源码（请复制至浏览器打开：https://club.rt-thread.org/ask/article/a26ee560e83dc5a7.html）

• serial_terminal.html

详细技术说明文档

• RC3506串口调试终端技术报告.docx

AI编译器提示词

• skills.md

压缩版本源码

serial_terminal(源码).rar