web-serial-monitor —— 免安装的浏览器端串口 / 蓝牙 / WebSocket 调试平台

/* MD / 富文本中的 .toc（含博客园搬家等嵌套结构）；.toc-box 在侧栏，不受影响 */
#content_views .toc,
/* 编辑器常在目录前后插入空 p（:empty 仍占 20px），一并去掉避免顶空隙 */
#content_views.markdown_views > p:empty:has(+ .toc),
#content_views.markdown_views > .toc + p:empty,
/* 富文本旧版目录标记 */
#content_views.htmledit_views #main-toc,
#content_views.htmledit_views #hr-toc,
#content_views.htmledit_views p[id*=\”-toc\”] {
display: none !important;
}
/* 目录去掉后，紧跟的首个标题不再多出一块上边距 */
#content_views.markdown_views > .toc + h1,
#content_views.markdown_views > .toc + h2,
#content_views.markdown_views > .toc + h3,
#content_views.markdown_views > .toc + h4,
#content_views.markdown_views > .toc + p:empty + h1,
#content_views.markdown_views > .toc + p:empty + h2,
#content_views.markdown_views > .toc + p:empty + h3,
#content_views.markdown_views > .toc + p:empty + h4 {
margin-top: 0 !important;
}

项目地址：https://github.com/createskyblue/web-serial-monitor 在线使用：https://createskyblue.github.io/web-serial-monitor 技术栈：React 19 + TypeScript 5.8 + Vite 6

目录

• 一、项目背景与定位
• 二、核心功能
  • 2.1 三种通信模式
  • 2.2 关键词染色与数据提取
  • 2.3 专业调试能力
  • 2.4 快捷键体系
• 三、使用方式
  • 3.1 本地构建与运行
  • 3.2 在线直接使用
  • 3.3 串口模式快速上手
  • 3.4 部署说明补充
• 四、适用场景与局限性
  • 4.1 适用场景
  • 4.2 局限性
• 五、总结

一、项目背景与定位

嵌入式与硬件调试离不开串口、蓝牙、网络这几类工具，但它们通常是各自独立的桌面软件——不同系统要装不同版本，数据格式也对不齐，很难在一个会话里同时覆盖本地串口、BLE 设备和远端服务。

web-serial-monitor 把 Web Serial API（串口）、Web Bluetooth API（BLE）、WebSocket（网络透传） 这三项浏览器原生能力统一到同一个界面里，免驱动、免客户端。打开浏览器就能用：实时收发、关键词染色、数据提取，纯静态前端，在线或本地部署均可，无后端依赖。

二、核心功能

2.1 三种通信模式

三种模式共享同一套收发、显示、染色与提取逻辑，用户可在界面中切换而无需更换工具。

2.2 关键词染色与数据提取

该功能以"规则"为单元，每条规则通过"起始"与"结束"两个字段定义匹配逻辑：

• 区间模式：同时填写"起始"与"结束"，工具高亮两者之间的区间，并提取区间内的内容。
• 关键词模式：仅填写"起始"，工具高亮该关键词，并记录其出现时间。

匹配支持 Text 与 HEX 双模式，可分别针对文本协议与二进制帧进行定位。提取结果采用自动锁存机制，独立于实时滚动的日志缓冲，即使后续涌入大量新数据，已提取的结果也不会被覆盖或丢失。

2.3 专业调试能力

• 多形态显示：支持纯文本、纯 HEX、同窗（文本与 HEX 左右对照）三种视图，Tab 键切换。
• 三折叠布局：左侧栏、右侧栏、发送区均可独立折叠，应用可收缩为极小窗口，便于在有限屏幕空间内与其他工具并排使用。
• 流控支持：提供 DTR / RTS 手动控制，且可在连接前预置初始电平状态，满足对硬件握手信号有要求的设备。
• 智能自动滚动：仅在视图处于底部时跟随新数据滚动；用户上翻查看历史时不会被新数据强制拉回底部。
• 大数据量优化：历史日志按块管理，默认仅渲染最近窗口，上滚时按需加载更早历史、回到底部后自动卸载，使内存与 DOM 节点数量保持有界。
• 收发能力：支持定时发送、文件发送（RAW 与 YModem 两种协议），以及可配置的快捷发送列表。文件发送过程中支持中途取消（基于 AbortController 中断）。
• 日志管理：提供缓冲区保护、TXT/BIN 导出、一键复制、配置导入导出与清屏等操作。

2.4 快捷键体系

三、使用方式

3.1 本地构建与运行

npm install
npm run dev # 本地开发
npm run build # 生产构建，产物输出至 dist/

dist/ 下的静态文件可直接托管或本地部署。

3.2 在线直接使用

访问 https://createskyblue.github.io/web-serial-monitor 即可在支持的浏览器中直接使用，无需安装。

3.3 串口模式快速上手（以 CH9114 15Mbps 4串口为例）

3.4 部署说明补充

串口与蓝牙仅可在 HTTPS 或 localhost 下使用；WebSocket 模式若要连接非加密 ws:// 本地 / 局域网服务，须将工具部署在 localhost。

四、适用场景与局限性

4.1 适用场景

• 嵌入式 / 物联网固件调试（对接 MCU、模组串口，看日志与协议帧）
• 硬件原型验证（研发早期快速验证通信，免搭专用桌面环境）
• 现场 / 临时排障（浏览器即用，无需安装权限）
• 远程串口透传（本地 WebSocket 代理桥接远端串口）
• BLE 设备调试（低功耗蓝牙特征读写与交互验证）

4.2 局限性

• 安全限制：串口 / 蓝牙仅 HTTPS 或 localhost 可用。
• WebSocket：HTTPS 页只能连 wss://，连 ws:// 须本地部署。
• 兼容性：主要依赖 Chromium（Chrome / Edge），Firefox / Safari 对 Web Serial 支持缺失或不完整。
• 性能边界：极高吞吐下受 JavaScript 单线程制约。
• 协议深度：仅通用收发 / 染色 / 提取，无行业协议深度解析。

五、总结

web-serial-monitor 通过统一封装 Web Serial、Web Bluetooth 与 WebSocket 三类通信能力，提供了一个免安装、跨平台、可直接在浏览器中运行的通信调试平台。其在关键词染色与数据提取、大数据量下的有界内存渲染、配置持久化与串口参数热更新等方面的工程实现，使其能够满足嵌入式与硬件调试中的实际诉求。

该项目的价值在于以极低的部署与使用时延，覆盖串口、蓝牙与网络三类调试场景，适合作为研发与现场排障的常备工具。读者可直接访问仓库源码进行二次开发，或通过在线地址立即体验。

相关链接

• 仓库：https://github.com/createskyblue/web-serial-monitor
• 在线版本：https://createskyblue.github.io/web-serial-monitor