网页串口工作台：通过 Web Serial API 连接串口设备，支持在线访问与离线本地使用；涵盖设备连接管理、实时监视、文本/HEX 解析、时域/频域/柱状图绘制、手动/定时/触发/预设发送，以及时间线录制、回放与导出；并嵌入可供 AI 直接读取的开发 skill，可用于开发同类型应用，或以其为基座构建应用型程序。
打开就能用，不需要安装。
| 使用方式 | 入口 | 说明 |
|---|---|---|
| 国内站点（推荐） | https://conductance-lab.xyz/SerialWeb/ | 始终是最新在线版 |
| GitHub Pages | https://conductance-lab.github.io/SerialWeb/ | 海外 / 备用入口 |
| 离线版 | 页面右上角菜单 → 下载离线版到本地 | 得到一个 HTML 文件，双击即可打开，无需联网 |
- 串口数据全程在你的浏览器本地处理，不经过任何服务器（服务器仅统计页面访问次数）。
- 需要 Chromium 内核浏览器（Chrome / Edge 等），并运行在
HTTPS或localhost下。
- 连接：打开页面 → 左侧「设备连接管理」→ 点击「连接设备」，在浏览器弹出的窗口里选择你的串口
- 确认数据：设置波特率 / 数据位 / 停止位 / 校验位 → 切到「监视」，确认设备正在输出数据
- 留存实验：点击顶部 REC 开始录制时间线 → 切到「解析」建立解析规则、添加图形
最值得记住的一条：先录制时间线，再做解析。 解析规则可以反复修改、重新套用；而原始数据只会出现一次。
| 模块 | 能做什么 |
|---|---|
| 设备连接管理 | 串口连接 / 断开、自动重连、波特率预设、数据位 / 停止位 / 校验位、硬件流控、DTR / RTS / BREAK 控制、CTS / DSR / DCD / RI 状态、失焦自动断连 |
| 实时监视 | 原始收发内容展示、按 \r\n / \r / \n 自动分帧、TX / RX / FPS 统计、显示缓存控制 |
| 发送 | 立即发送（手动）、定时发送（周期轮询）、触发发送（收到什么回什么）、预设发送（常用指令一键调用） |
| 文本解析 | 模板提取字段（如 A=12,B=3.14、temp-1=25.4、adc.ch0=1024），支持自动识别稳定结构并一键应用 |
| 十六进制解析 | 按「帧头 / 数据 / 校验 / 帧尾 / 间隔符」定义二进制帧结构，支持 uint8~uint32、float16/32、bool8 及大小端 |
| 图形分析 | 时域图、频域图、柱状图；可自由增删图框、调整顺序、绑定字段、设置量程 |
| 时间线 | 录制 / 回放 / 冻结锁定 / 导入导出（BIN TXT CSV），回放时重新生成监视器内容、解析结果与图形 |
| 导出 | 原始时间线（BIN / TXT / CSV）与解析结果（TXT / CSV，带 UTF-8 BOM，Excel 可直接打开） |
| 主题与布局 | 跟随系统或手动切换浅色 / 深色；宽屏与窄屏自动适配 |
flowchart LR
A["连接设备"] --> B["监视原始数据"]
B --> C["REC 录制时间线"]
C --> D["建立解析规则<br/>文本模板 / HEX 结构表"]
D --> E["时域图 / 频域图 / 柱状图"]
E --> F["导出<br/>原始时间线 或 解析结果"]
这条流程的核心价值：
- 原始数据始终保留 —— 时间线保存的是「实验现场」，不是「实验截图」
- 解析规则可反复调整 —— 换模板、换字段后可以重新套用同一份原始数据
- 图形与解析结果同源 —— 都建立在同一个「成功帧序列」上
- 结果能带走 —— 导出为标准
CSV/TXT，直接进入 Excel / Python / MATLAB / Origin
系统的配置中枢。宽屏下以左侧面板展开 / 折叠；窄屏下以浮层打开，内容与逻辑完全一致。
这里设置的项都会影响后续的录制、解析和回放行为，建议在实验开始前先确认：
- 串口连接与断开、自动重连、失焦自动断连
- 波特率与预设值、数据位、停止位、校验位
- 硬件流控、DTR / RTS / BREAK、CTS / DSR / DCD / RI
- 字符编码：
UTF-8（默认）/ASCII/Latin-1/UTF-16LE - 换行符设置、结尾补换行符
- 十六进制显示 / 发送、时间戳显示方式
用于回答「设备到底发了什么、系统到底收到了什么」。
- 自动分显示帧：遇到
\r\n/\r/\n结束一行（三者都只算一次换行）；设备持续发送且不换行时，数据会接续到当前这一条，直到出现换行符、你触发一次发送，或单条累计超过 2048 字节 / 字符被强制断开 - 顶部状态：模式状态、TX / RX 统计、FPS；回放模式下这些统计会按回放位置重新计算
- 显示缓存控制：只保留最近一段有效数据，长时间运行也不会越用越慢
| 方式 | 适用场景 |
|---|---|
| 立即发送 | 手工输入后立刻发送，遵循当前编码 / 换行 / HEX 设置 |
| 定时发送 | 周期轮询、心跳包、采样触发；维护发送队列按固定间隔循环发送 |
| 触发发送 | 简单握手、自动应答；定义「收到什么后自动回复什么」 |
| 预设发送 | 把高频命令整理为固定条目，可附预期响应，用于稳定重复验证 |
把原始数据转换为成功解析帧，再变成结构化结果与图形。
- 文本解析：模板宽松匹配，
_、-、.都可作为字段名的一部分；支持自动识别稳定结构并提示一键应用模板 - 十六进制解析：默认结构为
帧头 A5+ 数据 +校验 SUM8+帧尾 5A，可自定义帧头 / 帧尾 / 间隔符 / 校验方式 - 实时结果卡片：每成功识别一帧即进入统一的成功帧序列，最新值以卡片形式展示，便于确认字段是否提取正确
不是「顺手录个日志」，而是一套围绕原始数据的记录 / 回放 / 导出体系。
- 记录内容：带时间信息的原始串口数据，因此可以重新用于重建监视器显示、重新套用解析模板与结构表、重新生成时域图与频域图
- 回放：切换到任意时间线后，系统会重新走一遍数据解释过程，而不是播放一张静态快照
- 冻结：实时模式下可临时冻结（鼠标悬浮暂停按钮）或锁定冻结（点击），只影响显示层，后台仍继续接收
- 导入导出：
BIN/TXT/CSV；录制得到的时间线也可直接导出为TXT/CSV继续处理
| 导出内容 | 格式 | 用途 |
|---|---|---|
| 原始时间线 | BIN / TXT / CSV |
保存实验现场、分享测试过程、原始数据归档 |
| 解析结果 | TXT / CSV |
已按模板 / 结构表解释后的字段数据，直接交给 Excel、Python、MATLAB、Origin |
导出
CSV时写入 UTF-8 BOM，Excel 双击打开不会中文乱码（v2.0 起）。
菜单中的「复制配置 / 粘贴导入 / 清空配置」可以整体搬运：
- 串口参数、发送配置、解析模板、图框结构与图形设置
适合团队统一协议模板、保存成熟实验配置、换机或换人时快速复现同一套实验环境。
| 项目 | 要求 |
|---|---|
| 浏览器 | Chromium 内核：Chrome、Edge 等（不支持 Firefox、Safari —— 它们没有 Web Serial API） |
| 访问方式 | HTTPS 或 localhost（Web Serial API 的安全上下文要求）；离线版以 file:// 打开同样可用 |
| 操作系统 | Windows / macOS / Linux 均可；驱动按设备厂商要求安装 |
| 其他 | 打开串口前，请先关闭其它占用该串口的软件（串口助手、IDE 串口终端等） |
Q：点「连接设备」没有反应 / 不弹出串口选择框？
A：依次确认：① 用的是 Chrome / Edge；② 页面在 HTTPS 或 localhost 下打开（http:// 的普通域名不行）；③ 页面上是否出现「不支持 Web Serial API」提示。
Q：显示乱码怎么办？
A：先检查「设备连接管理 → 字符编码」。默认 UTF-8；如果下位机发的是纯 ASCII 或单字节数据，可试 ASCII / Latin-1；单片机用 2 字节宽字符的试 UTF-16LE。浏览器不支持 GBK / GB2312，遇到中文建议让下位机改发 UTF-8。
Q：接收区为什么会出现空行，或者该有空行却没有？ A：空行完全由换行符决定，当前的判定逻辑如下：
- 遇到
\r\n、\r、\n即结束当前行 —— 三者都只算一次换行，\r\n不会被当成两次（所以不会凭空多出一行） - 如果
\r与\n恰好落在两次接收之间，会被识别为同一个换行 - 设备如果连续发送多个换行（如
\n\n、\r\n\r\n），中间就会显示为真正的空行 —— 这是设备端本来就发出的空行，不是上位机多算的 - 设备一直不换行时，数据会接续到当前这一条，直到：出现换行符 / 你触发一次发送（发送前会把未结束的一行先收尾）/ 单条累计超过 2048 字节（或 2048 字符）被强制断开
- 不存在「空闲多久就自动断行」的机制，纯流式无换行数据会被视为一条长消息
所以：看到多余空行（或少空行）时，先切到十六进制视图确认设备实际发出的字节 —— 如果设备端确实连发了多个换行，那就是真实内容。
Q：数据量很大时会卡吗？ A：会。 受实现方式限制（网页单页面实时渲染），高速或长时间的数据流会明显卡顿，这是网页端方案的固有上限。如果你的目标是高速数据采集与处理，建议不要用网页端承载：可以让硬件自身带时间戳后本地记录/导出、采用定制方案，或改用本地 Python 脚本直接读串口并落盘。网页端更适合看现象、调协议，以及中小数据量的观察与轻量记录。
Q：需要额外安装、部署或准备其他文件吗？
A：不需要。单个 index.html 就能完成所有事情 —— 界面、样式、逻辑、图标全部内联，不依赖任何外部 CSS / JS / 图片，也不需要后端服务。放到任意静态托管，或直接双击本地打开，功能就是完整的。
Q：在线版和离线版有什么区别？ A：功能一致。在线版始终是最新版；离线版是你下载到本地的单个 HTML 文件，不自动更新，适合无网络或需要固定版本的场景。
index.html 一个文件即完整应用（HTML + 内联 CSS + 单个 IIFE 脚本），无任何外部 CSS / JS / 图片依赖，可以随意复制到任何静态托管平台。
页面 <head> 里内嵌了一段 Agent 提示词，三种读法任选：
- 在源码中搜索标记
SERIALWEB-AGENT-PROMPT - 读取
<body>末尾的隐藏文本节点<div id="ai-agent-prompt">（对用户不可见、不可选中，但源码、DOM 与「整页可见文本提取」都能读到） - 运行时执行
document.getElementById('ai-agent-prompt').textContent
《用 HTML + Web Serial 构建串口上位机应用》—— 连接与自动重连、发送、接收分帧、编码、解析、绘图、录制回放、配套下位机协议与硬件设计，含可直接复制的可运行骨架与坑清单：
- 本地：
skills/html-webserial-app/SKILL.md - GitHub：https://raw.githubusercontent.com/Conductance-lab/SerialWeb/main/skills/html-webserial-app/SKILL.md
- 国内站点：https://conductance-lab.xyz/SerialWeb/skills/html-webserial-app/SKILL.md
| 入口 | 位置 | 说明 |
|---|---|---|
llms.txt |
站点根 | 供只抓纯文本的 AI 使用的索引 |
AGENTS.md |
仓库根 | 仓库级 AI 约定与结构说明 |
ai/agent-prompt.md |
仓库 | 内嵌提示词的唯一来源 |
- 用精确字符串替换编辑，不要用 shell 脚本 / 正则批量改写（会破坏编码、换行与模板字符串）
- 功能改动走集中的
state+scheduleRefresh()刷新链路，不要零散直改 DOM - 涉及收发 / 解码 / 编码的改动，务必在浏览器里用真实数据验证
index.html # 应用本体（单文件）
release/vX.Y/ # 历史版本快照（index.html + LICENSE + README.md）
skills/html-webserial-app/SKILL.md # 面向 AI/开发者的实战开发指南
ai/agent-prompt.md # 内嵌提示词的唯一来源
tools/sync-agent-prompt.mjs # 提示词注入 / 校验脚本
AGENTS.md # 仓库级 AI 入口约定
llms.txt # 站点根 AI 索引
LICENSE # AGPL-3.0
README.md # 本文件
开源协议：AGPL-3.0（GNU Affero General Public License v3.0）
你可以自由使用、修改、分发；但如果修改后通过网络向他人提供服务，必须公开你的完整源码。分发时请附带本仓库的 LICENSE。
本项目由**电导实验室（Conductance-lab）**开发，B 站账号 电导不是韩导，官网 https://conductance-lab.xyz/。
- 优化版本详情页的显示效果与信息布局，并修复弹窗的遮挡问题。
- 嵌入可供 AI 直接读取的开发 skill，可用于开发同类型应用，或以其为基座构建应用型程序。
- 修复中文等多字节字符显示与解析乱码的问题。
- 修复切换字符编码后历史数据未重新解析、ASCII / Latin-1 编解码不一致及 UTF-16LE 换行误判的问题。
- 解析结果导出写入 UTF-8 BOM，修复 Excel 中文乱码。
- 修复串口接收数据特殊情况下监视器多出空行的问题。
- 优化设备连接管理中组件的显示效果。
- 优化图框的部分显示效果和操作逻辑。
- 「自动硬件流控」更名为「RTS/CTS 流控」，名称更准确。
- 重构 TX/RX 收发与换行符显示逻辑，优化监视器渲染与事件处理。
- 优化页面配色与扁平化设计，浅色/深色模式分离。
- 优化预设发送交互逻辑，通过开关控制全局快捷键的预设发送。
- 新增解析配置帮助提示，支持悬浮查看规则说明。
- 新增柱状图，支持通道选择、纵轴缩放与自动量程。
- name 标签匹配逻辑改为后缀数字匹配（name0↔int0），规则格式更灵活。
- 预设发送支持单字符快捷键，按下即发；自动全选，替换即生效。
- 修复 GitHub 历史版本仓库，优化离线版本使用体验。
- 优化紧凑显示模式、布局间距与各面板一致性。
- 优化通道交互、图框渲染、频域图通道筛选与 name 动态字段跟踪。
- 优化时间线回放、配置导入导出的图框状态同步与持久化。
- 优化模板解析、发送数据过滤与复选框样式统一。
- 支持定时、触发和预设发送在十六进制模式下保留原始字节，统一发送匹配与显示逻辑。
- 支持高级发送展开区高度拖动调整及各模块拖拽排序。
- 支持预设发送添加备注描述，监视器中显示发送与匹配状态标识。
- 优化十六进制结构解析，支持间隔符占位和帧尾留空的宽匹配逻辑。
- 优化实时解析结果展示，支持横向滚动、展开和折叠。
- 修正连接状态下修改串口参数未立即生效的问题。
- 新增全局配置导入导出与还原，统一保存设备、发送、解析及图框配置。
- 支持设置、输入状态在退出后自动保存，下次加载时恢复使用。
- 支持离线版本的下载和离线版本使用，并支持离线状态识别。
- 优化视觉效果，包括弹窗、下拉状态和窄屏悬浮窗的模糊背景。
- 新增关于弹窗、版本日志、工具手册、GitHub 和问题反馈入口。
- 支持串口监视、设备连接管理、VID/PID 显示、串口参数配置及硬件流控与信号控制。
- 支持深浅主题自动切换及宽屏/窄屏两种布局策略。
- 加入自动重连机制，设备插拔或连接丢失后可尝试恢复。
- 加入失焦自动断连机制，窗口失焦时释放串口，恢复焦点后继续使用。
- 支持图形解析，含文本解析、十六进制结构解析、自动识别规则及实时结果展示。
- 支持时域图与频域图绘制，可绑定解析通道并调整视图范围与量程策略。
- 支持时间线系统，含实时冻结、录制归档、回放、导入导出与解析配置复用。
- 时间线支持导入/导出 BIN/TXT/CSV 原始文件及 TXT/CSV 解析结果。
- 支持手动、定时、触发和预设发送等串口调试工作流。
页面内也能随时查看：右上角菜单 → 关于 vX.Y。