开源 Web 串口调试神器：跨平台、免安装，效率翻倍的开发利器！

https://qdsang.github.io/web-serial-debug/

🌟 项目简介

web-serial-debug 是一款基于 Web Serial API 的开源串口调试工具，无需安装客户端即可在浏览器中完成设备通信调试。支持 串口/WebUSB/Websocket/STLink 多协议连接，为嵌入式开发、物联网调试提供轻量化解决方案。

GitHub 地址：https://github.com/qdsang/web-serial-debug
在线体验：https://qdsang.github.io/web-serial-debug/

---

🚀 核心功能亮点

1. 全协议支持，调试无界限

• 多设备兼容：支持串口、WebUSB、Websocket 及 STLink 调试器连接，覆盖主流硬件开发场景
• 跨平台运行：基于浏览器实现，Windows/macOS/Linux 全平台通用（需 Chrome/Edge 等现代浏览器）

2. 高效数据交互

• 双模式收发：文本/HEX 格式自由切换，支持历史记录回溯与数据导出[^1]
• 快捷指令面板：预置常用指令模板，一键发送提升调试效率（如 AT 指令测试）

3. 脚本自动化（杀手级功能！）

通过 JavaScript 脚本实现 自动化测试流程，解决重复性调试痛点：

let cache = '';

// 处理接收的数据
async function DataReceiver(data) {
  cache += uint8ArrayToString(data);
  // 数据格式："pitch:-0.13,roll:0.00,yaw:0.07\n"

  if (cache.indexOf('\n') !== -1) {
    const lines = cache.split('\n');
    cache = lines.pop() || '';
    
    for (const line of lines) {
      let files = line.split(',')
      let data = {};
      files.map((str) => {
        let s2 = str.split(':')
        if (s2.length === 2) {
          data[s2[0]] = parseFloat(s2[1])
        }
      })
      
      // 更新到数据表
      updateDataTable(data);
    }
  }
  return data;
}

// 处理发送的数据
async function DataSender(data) {
  // checksum
  // await sleep(10);

  return data;
}

// 定时发送数据
setInterval(async () => {
  const bytes = new Uint8Array(3);
  // sendHex(bytes);
}, 1000);

// 支持的函数
// stringToUint8Array();
// uint8ArrayToHexString();
// uint8ArrayToString();

支持 API：

• sendText() / sendHex() 数据发送
• sleep() 精准延时控制
• 未来计划扩展更多设备控制 API[^1]

---

🔧 快速上手教程

步骤 1：环境准备

• 浏览器：Chrome 89+ 或 Edge 89+（需启用 Web Serial API）
• 硬件连接：通过 USB 线缆连接目标设备

步骤 2：设备连接

步骤 3：数据收发调试

• 发送区：支持文本/HEX 格式输入，提供历史指令下拉菜单
• 接收区：实时显示时间戳、方向标识，可配置显示过滤规则

---

💡 典型应用场景

案例 1：嵌入式开发调试

• STM32 固件烧录后，通过串口实时打印调试日志
• 配合 STLink 实现 SWD 接口调试（替代 ST-LINK Utility）

案例 2：物联网设备测试

• 自动化测试 LoRa/Wi-Fi 模组的 AT 指令响应
• 使用脚本模拟传感器数据上报（如温度/湿度 HEX 报文）

案例 3：教学实验

• 配合 Arduino 开发板实现可视化串口交互教学
• 学生无需安装 IDE 即可完成基础通信实验

---

🛠️ 开发者指南

技术栈

• 前端框架：Vite + React
• 构建工具：Node.js ≥18.0 + Yarn
• 扩展支持：Tauri 桌面应用封装（可选）[^1]

本地构建

# 克隆仓库
git clone https://github.com/qdsang/web-serial-debug.git

# 安装依赖
yarn install

# 启动开发服务器
yarn dev

# 生产环境构建
yarn build

---

❓ 常见问题

1. 兼容性如何？
   需 Chrome/Edge 89+ 版本，iOS 暂不支持 Web Serial API[^1]

2. 脚本执行安全吗？
   所有脚本在浏览器沙箱环境运行，无系统级访问权限

3. 商业用途是否受限？
   MIT 协议允许免费商用，需保留版权声明

---

立即体验 ➡️ 在线 Demo
项目地址 ⭐ GitHub 仓库

#嵌入式开发 #Web串口调试 #开源工具 #物联网 #效率工具