在线串口调试入门：用 Web Serial API 在浏览器中读取串口数据

**Web Serial API** 让网页在用户授权下直接读写本机串口（USB-UART、部分板载 COM），从而做出免安装的在线串口调试助手。Chrome / Edge 等 Chromium 桌面浏览器支持；Firefox / Safari 目前基本不可用。

### 最小闭环

1. `navigator.serial.requestPort()` — 用户手势触发，弹出端口选择。
2. `await port.open({ baudRate: 115200, dataBits: 8, stopBits: 1, parity: 'none' })`
3. `port.readable.getReader()` 循环 `read()` 收数据。
4. `port.writable.getWriter()` 写 `Uint8Array` 发数据。
5. 关闭时 cancel 读循环 → releaseLock → `port.close()`。

### 安全约束

• 必须在 **Secure Context**：HTTPS 或 localhost。
• 授权按源（origin）隔离，可 `getPorts()` 重连、`forget()` 撤销。
• 串口数据在浏览器进程内处理；成熟工具不会把业务字节上传服务器。

### 和传统串口助手对比

| 点 | Web Serial | 桌面 exe | |---|---|---| | 安装 | 免装 | 需下载 | | 权限 | 细、可撤销 | 系统级更高 | | 多平台 | 有浏览器即可 | 分系统打包 | | 离线现场 | 可配合 PWA | 天然本地 |

### 上手建议

直接打开 Web Serial Pro 一类工具连接 CH340/CP2102 设备，用 HEX/ASCII 收发验证。自己开发时先跑通 requestPort + 读写循环，再加分帧、日志与预设指令。

Web Serial 把「串口调试」从装软件变成打开网页——前提是 Chromium + 安全上下文 + 用户点击授权。 ## 为什么选择网页串口（获客说明）

• **免安装：** 临时电脑、实验室公共机无需装 SSCOM。
• **可分享：** 发送链接即可让同事用同一工具。
• **本地收发：** 业务数据默认不因调试而上传到业务服务器。

## 开始使用

1. 电脑版 Chrome 或 Edge 打开本站首页。
2. 点击连接，选择 CH340/CP2102 等端口。
3. 设置波特率，ASCII 或 HEX 收发。
4. 遇到乱码见《串口调试乱码怎么解决》；没有端口见《CH340 驱动》。

## 限制（诚实说明，利于信任与转化）

• 需要 Chromium 桌面浏览器与用户手势授权。
• 移动端 Safari/微信内置浏览器通常不可用。
• 系统仍需正确安装 USB 串口驱动。

// 1. 请求权限并连接
const port = await navigator.serial.requestPort();
await port.open({ baudRate: 115200 });

// 2. 异步接收流
const reader = port.readable.getReader();
try {
  while (true) {
    const { value, done } = await reader.read();
    if (done) break;
    console.log("收到字节：", value);
  }
} finally {
  reader.releaseLock();
}