JSON 数据调试完整工作流
一、场景:接口返回了一坨看不懂的 JSON
联调时后端返回的数据经常是压缩成一行的 JSON,几千个字符挤在一行里,肉眼根本无法定位字段。更麻烦的是数据可能来自多个环节:接口本身返回 JSON、某些字段是 Base64 编码的、URL 参数里又嵌了一段转义后的 JSON。这篇指南演示如何用本站四个工具把它们逐层剥开。
需要用到的工具组合:JSON 工具(格式化 / 校验 / 树形查看)、JSON 转换(JSON 与 XML / CSV / YAML 互转)、Base64 编解码(解码嵌套编码字段)、URL 编解码(还原转义后的参数)。
二、第一步:格式化与校验
打开 JSON 工具,把接口响应原文粘贴进左侧输入框,点击"格式化"。工具会立即做两件事:
- 语法校验:如果 JSON 非法(常见错误:多余逗号、单引号、key 没加引号、中文引号),会在错误位置给出行号与列号提示,直接定位到问题字符;
- 缩进美化:合法 JSON 会被展开为 2 空格缩进的多行结构,配合树形视图可以逐节点折叠,快速浏览大对象的骨架。
一个实用技巧:拿到大 JSON 后先点"折叠全部",只看顶层 key,确认数据结构符合预期后再逐层展开,比从头到尾滚动高效得多。
三、第二步:压缩与复制
反过来,当你需要把一段 JSON 塞进日志、写入配置或发给别人时,点击"压缩"可以去掉全部换行与空格。对于超过几十 KB 的 JSON,压缩后再复制可以显著减少体积。工具同时显示字符数与字节数,方便判断是否超出接口的长度限制。
四、第三步:处理嵌套的 Base64 字段
很多接口会把子结构编码成 Base64 字符串放在某个字段里,例如 data.content 是一串 eyJjb2RlIjoxMDB9 这样的文本。处理方法:
- 复制该字段值,打开 Base64 编解码 粘贴到解码框;
- 解码结果通常又是一段 JSON,把它再粘贴回 JSON 工具 格式化;
- 如此交替使用,可以把任意深度的"套娃"结构完全展开。
注意中文场景:Base64 解码出现乱码多半是原编码用了非 UTF-8 字符集,本站工具默认按 UTF-8 处理,与主流后端行为一致。
五、第四步:URL 参数里的 JSON
有些老系统喜欢把 JSON 直接拼在 URL 查询参数里,此时整段 JSON 会被 URL 编码(引号变 %22、花括号变 %7B)。先用 URL 编解码 的解码功能还原原文,再回到 JSON 工具格式化。反向操作(把 JSON 编码后拼 URL)同理:先 JSON 压缩,再 URL 编码,避免手动转义出错。
六、第五步:格式互转
当需要与使用其他数据格式的系统对接时,打开 JSON 转换:
- JSON → CSV:把对象数组导出为表格,交给业务方用 Excel 打开;注意嵌套对象会被序列化为字符串列;
- JSON → YAML:转成配置文件格式,常用于 Kubernetes、CI 配置迁移;
- JSON → XML:对接老式 SOAP / 企业内部系统时使用。
七、常见问题
- 格式化报错但肉眼看不出问题:优先检查不可见字符——从聊天工具复制的 JSON 常混入零宽字符或中文引号,可先用文本统计查看字符构成;
- 数字精度丢失:JSON 中超过 2^53 的整数在 JavaScript 中会失真,若要核对大 ID,建议用字符串形式传输;
- 字段顺序变化:JSON 对象本质无序,比较两份数据时不要依赖 key 顺序,可用Diff 对比对格式化后的文本做行级比较。
八、小结
JSON 调试的核心思路是"逐层剥开":先校验整体合法性,再格式化看清结构,遇到编码字段就用对应解码工具还原,最后按需转换格式交付。把这几个工具加入浏览器书签栏,联调时可以节省大量来回切换的时间。