物联网开发中，数据格式转换是高频但低效的环节。Hex 报文解析、时间戳换算、JSON 格式化、XML 结构查看、AES 加解密、Base64 编解码——这些操作本身不复杂，但分散在不同工具网站之间切换，既打断思路，也存在数据安全隐患（协议报文上传到第三方服务器）。

物联网协议工具箱把这些转换集中到一个页面，纯前端处理，数据不出浏览器。

工具概览

当前集成以下模块：

• Hex 转换：Hex ↔ ASCII / Hex ↔ 十进制，支持批量
• 时间戳：Unix 时间戳与日期互转，支持秒/毫秒
• 进制换算：二进制 / 八进制 / 十进制 / 十六进制互转
• JSON 格式化：格式化、压缩、校验、Unicode 转义/反转义
• XML 格式化：格式化、压缩、校验
• AES 加解密：ECB/CBC 模式，PKCS7/Zero/NoPadding
• Base64：文本编解码，文件转 Base64
• ProtoBuf：Hex 报文按 33 字段头解析

开源地址：https://gitee.com/road0329/iot_protocol_toolbox
在线使用：https://www.zfh-iot.cn/toolbox/

近期更新

JSON / XML 代码折叠视图

JSON 格式化结果此前为纯文本输出，层级较深时难以快速定位字段。本次更新引入了代码折叠视图：

• 左侧竖线标识缩进层级，每个 { / [ 节点配有 + / - 折叠按钮
• 折叠后显示 { ... } 摘要，可快速判断节点类型
• 支持全部展开 / 全部折叠
• 可在折叠视图与纯代码视图间切换
• 缩进选项（2 空格 / 4 空格 / Tab）仅在代码视图下显示

XML 格式化同步采用相同的折叠交互，并对标签名、属性名、属性值、注释做了语法高亮。两者共用同一套折叠逻辑和 CSS 样式，交互体验完全一致。

历史记录侧边栏

新增右侧可伸缩的历史记录面板，解决多工具切换时报文丢失的问题：

• 自动记录：每次输入操作（防抖 800ms）自动保存，记录工具类型、操作时间、报文大小、报文预览
• 一键恢复：点击历史记录项，自动切换到对应工具、恢复操作模式、加载报文内容
• 单条删除 / 全部清空：支持删除指定记录或一键清空
• 本地持久化：数据存储在 localStorage，最多保留 200 条，单条上限 50KB
• 可伸缩：面板可收起，收起后显示竖条展开入口

布局优化

• 输入区和结果区改为各自独立纵向滚动，页面高度锁定在视口内，不再撑出浏览器滚动条
• 结果区支持横向滚动，超宽内容不再挤压输入框
• 整条 flex 布局链通过 min-height: 0 实现内容区内部滚动
• 移动端（768px 以下）恢复自然滚动，保证可用性

技术实现

项目基于 Vite + 原生 JavaScript，无框架依赖，构建产物为静态文件。

代码折叠视图的实现思路：对 JSON 使用 JSON.stringify 生成格式化文本，按行解析识别块开始（{ / [）和块结束（} / ]），通过栈匹配确定每个折叠块的起止行，渲染时用绝对定位将竖线和折叠按钮放置在缩进区域内。XML 采用相同的解析-匹配-渲染流程。

历史记录模块通过 debounceRecord 函数集成在各工具的实时转换流程中，使用 window.nav / window.setMode 实现工具切换和模式恢复。

适用场景

• 物联网 / 嵌入式开发：设备报文解析、通信协议调试
• 后端开发：JSON / XML 配置处理、加解密验证、进制转换
• 测试 / 运维：报文格式校验、时间戳换算、Base64 编解码
• 教学辅助：数据格式、编码原理的对照学习工具

访问方式

在线地址：**https://www.zfh-iot.cn/toolbox/
**

无需注册、无需登录，浏览器直接打开即可使用。所有数据处理在本地完成，不上传服务器。

项目持续迭代中，如在使用中发现问题或有功能建议，欢迎在 Gitee 仓库提交 Issue。