基于Web Serial API的网页版串口调试助手

原创已于 2026-02-26 17:43:09 修改 · 1k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#人机交互

于 2026-02-26 17:40:12 首次发布

该文章已生成可运行项目，

网页版串口调试助手

一个基于Web Serial API的网页版串口调试助手，支持在浏览器中直接访问和操作本地串口设备。

功能特点

🎯 客户端串口访问：使用Web Serial API直接访问客户端串口设备，无需服务器中转
🔒 HTTPS支持：内置HTTPS服务器，满足Web Serial API的安全要求
⚙️ 完整的串口配置：支持波特率、数据位、停止位、校验位的配置
🔢 自定义波特率：支持输入任意波特率，包括瑞芯微RK系列使用的1500000波特率
📝 时间戳显示：可选择是否在接收数据时显示时间戳
🔍 16进制发送和显示：支持16进制格式的发送和显示
📱 响应式布局：适配不同屏幕尺寸，配置区域位于左侧，数据收发区域位于右侧
🎨 现代化UI：使用Tailwind CSS构建，界面美观易用

项目链接

https://github.com/1356928/SerialWeb/tree/main

项目结构

SerialWeb/
├── index.js          # 后端服务器文件
├── package.json      # 项目配置和依赖
├── public/           # 静态文件目录
│   ├── index.html    # 前端页面
│   └── script.js     # 前端逻辑
├── ssl/              # SSL证书目录
│   ├── server.key    # 私钥文件
│   └── server.cert   # 证书文件
└── README.md         # 项目说明文档

安装步骤

1. 克隆项目

git clone https://github.com/1356928/SerialWeb.git
cd SerialWeb

2. 安装依赖

npm install

3. 生成SSL证书

由于Web Serial API仅在HTTPS或localhost环境下可用，我们需要生成自签名SSL证书。

# 创建ssl目录
mkdir -p ssl

# 生成私钥
openssl genrsa -out ssl/server.key 2048

# 生成证书签名请求
openssl req -new -key ssl/server.key -out ssl/server.csr

# 生成自签名证书
openssl x509 -req -days 365 -in ssl/server.csr -signkey ssl/server.key -out ssl/server.cert

# 删除证书签名请求（可选）
rm ssl/server.csr

部署步骤

1. 启动服务器

node index.js

服务器会在端口3000上启动，使用HTTPS协议。

2. 访问页面

打开浏览器，访问 https://localhost:3000

3. 处理安全警告

由于使用的是自签名证书，浏览器会显示安全警告。

Chrome/Edge：点击"高级" -> “继续访问localhost（不安全）”
Firefox：点击"高级" -> “接受风险并继续”

4. 授权串口访问

首次使用时，点击"打开串口"按钮，浏览器会弹出串口选择对话框，选择要使用的串口设备并点击"连接"进行授权。
串口授权

使用说明

1. 串口配置

串口：选择要使用的串口设备
波特率：选择预设波特率或输入自定义波特率
数据位：选择数据位（5-8）
停止位：选择停止位（1-2）
校验位：选择校验位（无/奇/偶）

2. 显示选项

显示时间戳：勾选后，接收到的数据会显示时间戳
16进制显示：勾选后，接收到的数据会以16进制格式显示

3. 发送选项

16进制发送：勾选后，输入的数据会以16进制格式发送

4. 数据收发

发送数据：在发送区域输入要发送的数据，点击"发送"按钮
接收数据：在接收区域查看从串口接收到的数据
自动滚动：勾选后，接收区域会自动滚动到最新数据
清空：点击"清空"按钮清空发送或接收区域

5. 操作按钮

刷新串口列表：刷新已授权的串口列表
打开串口：打开选中的串口设备
关闭串口：关闭当前打开的串口设备

注意事项

浏览器支持：Web Serial API仅在现代浏览器中可用，支持的浏览器包括：
- Chrome
- Edge
安全要求：Web Serial API仅在HTTPS或localhost环境下可用，因此必须使用HTTPS协议访问页面。
权限问题：首次使用时需要用户授权访问串口设备，授权后浏览器会记住该设备，下次使用时无需再次授权。
自定义波特率：输入自定义波特率时，请确保输入的是有效的正整数。
16进制格式：使用16进制发送时，输入的格式可以是空格分隔的16进制字符（如 48 65 6c），也可以是连续的16进制字符（如 48656c）。