物联网协议工具箱:一个纯前端的协议调试辅助工具
物联网开发中数据格式转换是高频但低效的环节。Hex 报文解析、时间戳换算、JSON 格式化、XML 结构查看、AES 加解密、Base64 编解码——这些操作本身不复杂但分散在不同工具网站之间切换既打断思路也存在数据安全隐患协议报文上传到第三方服务器。物联网协议工具箱把这些转换集中到一个页面纯前端处理数据不出浏览器。工具概览当前集成以下模块Hex 转换Hex ↔ ASCII / Hex ↔ 十进制支持批量时间戳Unix 时间戳与日期互转支持秒/毫秒进制换算二进制 / 八进制 / 十进制 / 十六进制互转JSON 格式化格式化、压缩、校验、Unicode 转义/反转义XML 格式化格式化、压缩、校验AES 加解密ECB/CBC 模式PKCS7/Zero/NoPaddingBase64文本编解码文件转 Base64ProtoBufHex 报文按 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。