以前跟 Arduino、ESP32 这类开发板通信，得装个串口工具（PuTTY、Tera Term、Arduino 自带的串口监视器之类），或者自己写个 Python 脚本。Web Serial API 出现之后，事情变简单了——直接在浏览器里就能读写串口数据，不用装任何软件。

Web Serial API 是什么

Web Serial API 是 W3C 制定的一个标准接口，允许网页通过 JavaScript 与本地串口设备通信。它属于 WebAPI 家族的一员，跟 Geolocation、Clipboard API 这些是同一个层面的东西。目前由 Chromium 团队维护实现，已经从实验性功能转成了稳定 API。

它的工作方式是：网页通过 navigator.serial 对象请求访问用户的串口设备，用户在弹窗里确认授权之后，页面就可以打开连接、配置波特率、读写数据了。整个过程不需要中间件或插件。

支持两种物理连接方式：

  • USB-CDC：通过 USB 线连接带 USB 转串口芯片的设备（最常见的场景）
  • 蓝牙串口：部分设备通过蓝牙 SPP 协议暴露串口服务（需要额外配对步骤）

支持哪些设备

基本上所有带 USB-Serial 芯片的开发板都能用，常见的包括：

  • Arduino Uno / Nano / Mega — 板载 ATmega16U2 或 CH340 芯片做 USB 转串口
  • ESP32 / ESP8266 — 大多数开发板板载 CP2102 或 CH340
  • STM32 — Nucleo 板和很多国产开发板自带 ST-Link VCP 或独立桥接芯片
  • Raspberry Pi Pico — RP2040 原生支持 USB CDC
  • USB-TTL 模块 — CP2102、CH340、FT232 这类独立的转换模块也行
  • 其他嵌入式设备 — 只要操作系统识别为串口设备（COM 口或 /dev/tty*）就行

纯 USB 设备（比如 U 盘、普通鼠标键盘）不在范围内，因为它们不走串口协议。

浏览器兼容性

现实情况是这样的：

  • Chrome / Edge / Opera / Brave：Chrome 89+ 完整支持，基于 Chromium 的浏览器都行
  • Firefox：目前不支持，官方也没有明确的实现计划
  • Safari：不支持
  • 移动端 Chrome (Android)：支持，但需要用 OTG 转接线连接硬件设备
  • iOS Safari：不支持，而且 iOS 对外设接入的限制比较多

所以实际使用基本等于 "装个 Chrome 就能用"。如果用户坚持用 Firefox 或 Safari，只能建议换浏览器或者回退到传统串口工具方案。

Web Serial 怎么连接设备

一个完整的 Web Serial 操作流程大概分这几步：

// 1. 请求端口并获取用户选择
const port = await navigator.serial.requestPort();

// 2. 打开连接（设置波特率等参数）
await port.open({ baudRate: 9600 });

// 3. 写入数据
const writer = port.writable.getWriter();
const encoder = new TextEncoder();
await writer.write(encoder.encode("Hello device\n"));
writer.releaseLock();

// 4. 读取数据
const reader = port.readable.getReader();
while (true) {
  const { value, done } = await reader.read();
  if (done) break;
  console.log("收到:", new TextDecoder().decode(value));
}
reader.releaseLock();

// 5. 用完关闭
await port.close();

几个要点：

  • requestPort() 必须由用户手势触发（点击按钮之类的），不能在页面加载时自动调用
  • 波特率、数据位、停止位、校验位这些参数在 open() 里配置，默认值一般是 9600, 8N1
  • 读写用的是 Streams API 的 Writer/Reader 接口，跟处理网络流的方式类似
  • 记得调用 releaseLock() 释放锁，否则后续操作会被阻塞

实际用途举例

有了这个能力之后能做什么？几个常见场景：

调试嵌入式固件

给 Arduino 或 ESP32 刷完固件之后，通常需要查看串口输出的日志信息来判断程序运行状态。在线串口工具可以替代 Arduino IDE 自带的串口监视器，界面更灵活，还能把日志保存下来。

查看传感器数据

接了温湿度传感器、加速度计之类的硬件之后，设备会持续往串口输出采样数据。网页端可以实时接收这些数据并用图表可视化展示，比盯着终端看原始数字直观得多。

发送 AT 指令

ESP8266、SIM800 这类模组通过 AT 指令集控制（比如发短信、连 WiFi）。用网页界面发送 AT 指令比手敲终端方便，还能把常用指令做成按钮一键发送。

固件更新辅助

虽然刷固件本身还是得靠 esptool 或 avrdude 这类专用工具，但串口通信是底层基础。有些轻量级固件甚至可以通过 XModem/YModem 协议经串口直接传输。

Web Serial 有哪些安全限制

浏览器让网页访问硬件，安全方面自然有不少限制：

  • 必须用户主动授权：requestPort() 会弹出设备选择框，用户必须手动选一个端口才能继续。页面没法静默枚举或连接
  • 需要安全上下文：只在 HTTPS 页面或 localhost 下工作，普通 HTTP 页面拿不到 serial 对象
  • 需要用户手势：前面说了，requestPort 必须由 click、keydown 这类事件触发，setTimeout 里调不行
  • 每次会话都要重新授权：关闭标签页之后授权失效，下次再来得再点一次
  • 同一时间只有一个页面能占用端口：如果一个标签页已经打开了某个串口，另一个页面试图打开同一个端口会失败

另外要注意，如果你在网页里实现了串口通信功能，这个网页本身应该部署在 HTTPS 上。本地开发用 http://localhost 可以豁免，但测试线上环境必须上 HTTPS，否则 API 直接不可用。

最后提一下，Web Serial 只能做基本的串口读写。如果你的需求涉及复杂的二进制协议解析、多设备同时管理、自动化测试流程这些，还是建议用 Python（pySerial）、Node.js（SerialPort）这类成熟的方案。在线工具的优势在于零安装、跨平台、上手快，适合临时调试和快速验证想法。

常见问题

Web Serial 能取代专业串口工具吗？

日常调试足够了，但专业场景还差点意思。缺的功能包括：多端口同时监听、定时自动发送、协议解析模板、数据持久化记录等。如果你的需求是偶尔连个 Arduino 看数据，Web Serial 完全够用。

连接串口设备没反应怎么办？

检查三点：1）波特率是否匹配（常见值 9600、115200）；2）驱动是否安装（CH340/CP2102 芯片需要对应驱动）；3）其他程序是否占用了串口（关闭串口监视器等工具再试）。

能同时连接多个串口设备吗？

可以。Web Serial API 支持同时打开多个串口连接，每个连接独立管理。但浏览器对并发连接数可能有限制，建议同时不超过 3-4 个。

Web Serial 在线串口

使用 Web Serial 在线串口工具

相关工具

Web ADB 在线调试