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

开源 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串口调试 #开源工具 #物联网 #效率工具