DevFormatLab

JSON 比对

比对 · 高亮差异

在两侧粘贴 JSON 即可逐行对比,差异以颜色高亮标记。

+4 新增 · -3 删除 · =5 相同
原始 JSON有效
修改后 JSON有效

两侧输入完全在浏览器内处理,不会上传到任何服务器。

什么是 JSON 比对?

JSON 比对工具用于比较两份 JSON 文档,标出它们之间的差异:哪些属性是新增的、哪些被删除、哪些值发生了变化。和普通文本 diff(例如 git diff)不同,普通 diff 会把所有重排版的行都视作改动;而结构化的 JSON 比对能理解 {"a":1,"b":2} 与 {"b":2,"a":1} 是同一个对象,也能识别同一份载荷的美化版与压缩版在语义上完全相等。这在排查接口响应变化、追踪环境间配置漂移、验证灰度发布、调试突然失败的测试 fixture、或审计第三方真正发来的数据时都至关重要。 DevFormatLab 的 JSON 比对在一个工作区里同时提供两种视角。文本视图是熟悉的左右红绿对照,基于 LCS 算法——适合截图分享或复制片段。结构化视图把差异提炼为一个清爽的路径列表(例如 $.user.email 或 $.items[3].price),每一项标注为新增、删除或修改,并能导出符合 RFC 6902 标准的 JSON Patch 文档,可用任何标准库程序化回放。默认会先对对象键名排序,避免属性顺序造成假阳性;可选的「忽略数组顺序」会归一化 tags、角色 ID 等无序集合。两侧输入都由浏览器原生 JSON.parse 解析、内存中比对、本地渲染——页面加载后不会发送任何网络请求,因此生产密钥与客户数据始终留在你的电脑上。

功能特性

  • 并排文本视图,行级红绿高亮
  • 结构化视图:变更路径列表 + 新增 / 删除 / 修改 标签
  • RFC 6902 JSON Patch 导出 —— 可用任意标准库回放
  • 可选按键名排序,避免属性顺序差异
  • 可选忽略数组顺序,适合 tags、角色 ID 等无序集合
  • 两侧面板上下与左右滚动同步
  • 两侧分别严格校验 JSON,分别报错
  • 100% 浏览器运行 —— JSON 不会离开你的设备

使用步骤

  1. 在左侧粘贴原始 JSON,右侧粘贴修改后的 JSON。美化或压缩都可以——工具内部会重新格式化后再对比。
  2. 保持「按键名排序」开启(默认),让对比与属性顺序无关;只有当字面顺序属于契约一部分时再关闭。
  3. 对 tags、权限列表等无序集合,开启「忽略数组顺序」——两侧数组会先深度排序后再比较。
  4. 查看下方并排彩色对比:红行为删除,绿行为新增,未变更行保持中性色。利用同步滚动浏览长文档。
  5. 切到结构化视图,可以看到紧凑的路径变更列表与实时 RFC 6902 patch。点击 Export Patch 下载 patch.json。
  6. 用 Swap 反转对比方向;或用 Format both 把两侧就地按 2 空格美化。

常见问题

对比时为什么报「Unexpected token o in JSON at position 1」?

你粘贴的是字面字符串 [object Object],而不是真正的 JSON。常见于直接 console.log(obj) 然后复制控制台输出,或者把对象拼字符串。请先序列化: // 错误 console.log("payload=" + obj) // 正确 console.log(JSON.stringify(obj, null, 2)) 两侧分别粘贴 JSON.stringify 的输出,对比就能正常工作。

两份看起来一样的 JSON,为什么会被识别为有差异?

常见原因: • 开头藏了空白字符或 BOM(从文件复制时常常带 U+FEFF) • 其中一侧多了一个结尾换行 • 数字 vs 字符串:1 ≠ "1" • 真实差异:null vs "null"、true vs "true" 保持「按键名排序」开启可以避免属性顺序造成的假阳性;切到结构化视图可以看到每一条真实变更对应的 JSON Patch 路径。

如何忽略数组顺序(例如 tags / 权限列表)?

勾选工具栏里的「Ignore array order」。两侧数组会被归一化——每个元素递归地按其 JSON 字符串字典序排序后再对比。tags、角色 ID、特性开关等无序集合开它;步骤列表、分页结果等有序集合请关闭,因为顺序变化本身就是变更。

如何把差异导出为补丁?

点击 Export Patch 下载 patch.json,符合 RFC 6902 标准的 JSON Patch: [ { "op": "replace", "path": "/user/email", "value": "new@x.com" }, { "op": "add", "path": "/tags/-", "value": "beta" }, { "op": "remove", "path": "/legacy" } ] 可以用任意 RFC 6902 库(JS 的 fast-json-patch、Python 的 jsonpatch 等)程序化地应用。

对比支持多大的输入?

LCS 算法是 O(n × m) 行复杂度,每侧 5000 行以内基本秒级;超过 5 万行可能会让标签页短暂卡顿。大数据建议: • 开启「按键名排序」,避免键顺序差异放大行级 diff • 改用结构化视图(路径列表),即使输入超大也很轻 • 只对子树做 diff:粘贴 response.data.items 而不是整个外壳

数据会上传到服务器吗?

不会。两侧 JSON 都在浏览器内通过 JSON.parse 解析、在内存中比较、再渲染到 DOM。打开开发者工具的网络面板,点击对比,你不会看到任何新请求。

相关工具

Canonical: https://devformatlab.com/zh/json-diff