数据与格式转换

JSON 差异对比工具

把两段 JSON 粘贴进左右编辑器，DevKitLab 会同时给出 git 风格的并排或行内差异，以及按 JSON Path 组织的结构化变更列表。某条字符串值变化太长时，会在右侧面板中以词级红绿高亮告诉你具体差在哪一段，不需要再去人工 diff 一段长字符串。可以忽略键顺序进行语义对比，可以折叠未变更区域只看差异，可以一键在上一处/下一处变更之间跳转，可以一键格式化两侧统一缩进。所有处理都在浏览器本地完成，左右 payload 不会发送到服务器。

  • 左右双栏 git 风格对比，红绿高亮整行变更，行内进一步标出字符级差异
  • 可切换 unified 行内模式，小改动直接内联显示新旧片段，无需上下两栏比较
  • 右侧结构化面板按 JSON Path 列出新增 / 删除 / 修改 / 移动，点击即可跳到编辑器对应位置
  • 长字符串改动会在面板里展开词级红绿 diff，定位到具体差异片段
  • 可忽略键顺序进行语义对比，避免因键名重新排列而显示"全表变化"
  • 折叠未变更区域（默认开启）只显示差异附近的上下文，长 JSON 也能一眼看完
  • 上一处 / 下一处差异快捷跳转，左右内容可一键交换，可一键格式化两侧
  • 数组按 id / key / name / uuid 等启发式 hash 对齐，避免插入一项导致整段错位
  • 左右输入自动保存到 localStorage，刷新页面后内容仍在
  • 完全本地处理：两侧 JSON、token、配置和日志内容不会发送到服务器
工具/JSON 差异对比工具
原始 JSON
修改后 JSON
请在两侧粘贴 JSON 后开始对比
请在两侧粘贴 JSON 后开始对比
Diff 命令

功能简介

这个 JSON Diff 不是简单地把两段 JSON 上下放在一起看。它同时给出"按文本对比"和"按结构对比"两种视角，配合字符级高亮、词级长字符串差异、路径跳转和数组对齐，让你在 review 接口变更、配置改动、fixture 差异时少走弯路。

  1. 01

    并排 git 风格差异

    左右两个 CodeMirror 编辑器同步滚动，变更行整行高亮，行内进一步用字符级高亮标出具体改动位置，类似 GitHub PR 的双栏 diff。

  2. 02

    行内 unified 模式

    切换到 unified 后变成单编辑器，旧文本作为只读对照显示在改动块上方；小范围改动会内联展示新旧片段，便于在窄屏或文档里看清逐字差异。

  3. 03

    结构化变更列表

    右侧面板列出每一处变化，按 $.users[2].name 这样的 JSON Path 索引。新增 / 删除 / 修改 / 移动分别用不同颜色和图标标记，一眼分清类型。

  4. 04

    长字符串词级 diff

    当某个字符串字段两侧都很长且不同时，面板会在该行下方展开词级红绿高亮，告诉你具体哪一段被改写、被插入或被删除，不需要再开第二个工具对比长文本。

  5. 05

    忽略键顺序进行语义对比

    开启"忽略键顺序"后，结构化对比会先递归排序键名再 diff。配合"格式化两侧"还能把两侧编辑器内容也排序后重写，让视觉 diff 同样无视键顺序。

  6. 06

    折叠未变更区域

    默认开启的"折叠未变更"会自动折叠 diff 之外的大段相同内容，每个改动块上下各保留 3 行上下文。在数千行的配置或大 payload 里也能直奔差异。

  7. 07

    差异之间跳转与导航

    上一处 / 下一处按钮按 chunk 级别跳转，配合面板点击 JSON Path，可以在长 diff 里快速 review 每一处改动而不漏看。

  8. 08

    数组按内容对齐

    默认根据每个元素的 id / key / name / uuid / _id 字段做 hash 匹配，避免"在数组中间插入一项就导致整段被标为变更"的常见 diff 噪音。

  9. 09

    一键格式化两侧

    当两侧缩进、键序不一致时，可以一键把两侧都重写为 2 空格缩进的格式化版本（开启"忽略键顺序"时同时排序），让视觉 diff 立即变干净。

  10. 10

    完全本地，零上传处理

    解析、对比、字符串 diff、复制和文件读取都在浏览器本地完成。左右两侧的 JSON、生产响应、token 和配置不会发送到服务器。

如何使用

常见流程是：粘贴两侧 JSON，按需开启忽略键顺序或格式化两侧，结合并排视图和右侧结构化列表逐处 review，最后复制有问题的字段路径。

  1. 01

    把"原始 JSON"和"修改后 JSON"分别粘贴到左右编辑器。两侧都可以直接编辑，输入会自动保存到 localStorage。

  2. 02

    默认进入并排对比模式：变更行整行红 / 绿高亮，行内会进一步标出字符级差异；不喜欢上下视野的可以切换到"行内对比"模式。

  3. 03

    看右侧"结构化差异"面板，按 JSON Path 索引每一处新增 / 删除 / 修改。点任意一行可跳到编辑器对应位置。

  4. 04

    如果某个字符串字段两侧都很长，面板会自动展开词级 diff，告诉你具体哪一段不一样。

  5. 05

    两侧键顺序不同导致全表变化时，开启"忽略键顺序"并点击"格式化两侧"，让左右都按排序后的格式重写，diff 立即干净。

  6. 06

    用"上一处 / 下一处"按钮在长 diff 里依次 review；默认会折叠未变更区域，必要时关闭以恢复全文上下文。

  7. 07

    需要在文档或工单中引用某个字段时，把鼠标移到面板某行，点击"复制路径"获得 $.data.users[0].email 这样的精确路径。

功能说明

这些功能覆盖了 JSON diff 时最常见的几类问题：行级差异看不到字符细节、长字符串无法定位差异位置、键顺序不同导致全表变化、数组中间插入一项就错位、长 payload 看不完。

  • 并排 git 风格双栏视图，整行红绿高亮，行内字符级 outline 标出具体差异。
  • unified 行内模式，把旧文本作为只读对照覆盖在改动块上方；小改动直接内联展示新旧片段。
  • 右侧结构化变更面板按 JSON Path 列出每一处变化，新增 / 删除 / 修改 / 移动分别配色。
  • 长字符串改动自动展开词级红绿 diff，定位到具体哪一段被改写。
  • "忽略键顺序"开关让结构化对比无视键名顺序，避免无意义的"全表变化"。
  • "折叠未变更"自动折叠 diff 之外的大段相同内容，长 JSON 也能直奔差异。
  • "上一处 / 下一处"按 chunk 级别跳转，长 diff 不漏看。
  • 数组按 id / key / name / uuid / _id 启发式对齐，避免插入一项导致整段错位。
  • 一键"格式化两侧"，把左右编辑器都重写为统一缩进，配合忽略键顺序时同步排序。
  • "交换"一键互换左右，"清空"一键重置；左右输入自动持久化到 localStorage。
  • 主题自动跟随系统深浅色，红 / 绿配色在两种主题下都保持对比度。

适合哪些场景

这个页面适合所有"我手里有两段 JSON，想知道它们到底差在哪里"的场景。

  1. API 响应变更 review

    把上一版接口返回和当前返回粘到两侧，快速看清哪些字段新增、哪些字段被删、哪些值变了，特别是嵌套字段和长字符串字段。

  2. 配置文件 diff

    tsconfig、package.json、eslint 配置、CDN 规则、feature flags 改动 review。开启忽略键顺序后，键序变化不会污染真正的语义改动。

  3. fixture / 种子数据回归

    把测试 fixture 的旧版本和新版本对比，确认你的改动只影响了预期字段，没有意外修改其他用例。

  4. JWT / token 解码后对比

    把两次签发的 JWT 解码 payload 粘进来，对比 claims 的变化，确认 issuer、audience、scope 等字段是否符合预期。

  5. AI 工具调用参数对比

    对比同一次会话两次 tool call 的参数、Agent 中间状态的前后差异，定位是哪一步引入了不期望的字段变化。

  6. Webhook payload 回放校验

    把生产环境捕获的 Webhook 和回放环境产生的 payload 对比，确认 signature 之外的字段是否完全一致。

  7. 配置环境间差异

    对比 dev / staging / prod 三个环境的配置 JSON，定位是哪几个 key 在不同环境下有差异，方便统一基线。

  8. 迁移前后数据比对

    在数据迁移、批量改名或重构后，把迁移前后的样本 JSON 粘进来，确认结构变化符合预期、值字段没被意外覆盖。

  9. 事故复盘

    把出问题时的 payload 和正常 payload 粘进来对比，配合长字符串词级 diff，快速定位是哪一段编码或字段值导致了下游异常。

延伸阅读

想先把两侧 JSON 各自整理干净再对比？可以先用 JSON 格式化 校验语法、智能修复、统一格式后再回到这里对比。如果对比完想把差异部分转换成 YAML、CSV 或其他格式，可以交给 JSON 转换器 进一步转换。如果两侧 JSON 被包在日志前缀或其他文本里，可以先用 文本替换 去掉外层包装，再回到这里看真正的 payload 差异。

理解这里的"差异"

JSON Diff 看起来直接，但"按文本对比"和"按结构对比"会给出不同的结果。下面这些概念在 review 时常被忽略。

  1. 文本对比 vs 语义对比

    左右编辑器中的红绿高亮按文本 diff，会把空白、键顺序、缩进差异都视为变化。右侧结构化面板按语义 diff，只关心字段和值的实际改动。两者结合使用更准。

  2. 键顺序在严格 JSON 里不重要

    {"a":1,"b":2} 和 {"b":2,"a":1} 在 JSON 数据语义上相同，但文本不同。开启"忽略键顺序"后，结构化对比把它们视为一致；如果还想让视觉 diff 也一致，请用"格式化两侧"。

  3. 数组的"对齐"决定 diff 噪音

    数组中间插入一项时，如果按位置 diff 会把后面所有元素都标为变化。这里默认按每个对象元素的 id / key / name / uuid 启发式对齐，避免这种伪差异。

  4. 长字符串值需要词级 diff

    当一个字段是长字符串（比如 description、prompt、URL、HTML 片段），整体标记为"改变"基本没用。这里会自动展开词级红绿高亮，定位到具体差异片段。

  5. 移动 vs 修改的区别

    数组中元素从一个位置挪到另一个位置，jsondiffpatch 会识别为"移动"而不是"删除 + 新增"。这条信息可以帮你判断这是顺序调整还是真正的内容变化。

  6. JSON Path 是引用单一字段的标准方式

    面板里每一行的 $.users[2].name 形式可以直接复制，用在文档、工单或代码注释里，比"那个用户名字段"清晰得多。

使用建议

配置 diff、接口变更 review 和 fixture 比对，越大的 payload 越需要一套固定的检查习惯。下面这些做法能减少误判。

  • 粘贴后先看右侧顶部的"共 X 处新增 · Y 处删除 · Z 处修改"摘要，先估摸改动规模，再决定是逐处 review 还是抽样。
  • 看到大面积差异时，先确认是不是键顺序或缩进引起的伪差异。开启"忽略键顺序"并"格式化两侧"，再判断实际语义改动。
  • 数组中间插入或删除一项时，依赖默认的 id / key / name / uuid 对齐；如果你的数组元素没有这些字段，可以临时给样本加一个稳定字段再对比。
  • 看到字符串字段的"长改动"先展开词级 diff，再决定要不要进入文本 diff 工具进一步分析。
  • 长 JSON review 时保持"折叠未变更"开启，用上一处 / 下一处按 chunk 跳转，避免漏看小改动。
  • 需要把某处改动写进工单或文档时，复制结构化面板里的 JSON Path，比口头描述精确得多。
  • 处理生产 payload 前先脱敏。工具不上传数据，但你截图、贴到工单或聊天里的内容可能会泄露。

边界与注意事项

这个工具专注 JSON 内容的差异展示，不替代 schema 校验、变更评审流程或专业的版本控制。

  • 它给出"哪里不一样"，但不会告诉你"应该不应该不一样"。业务规则、版本约束、向后兼容判断仍然需要 schema、code review 和回归测试。
  • 它不是 Git。这里没有提交历史、分支或 blame，仅做两个静态 payload 的对比。要追踪长期演变，请使用版本控制系统。
  • 长字符串词级 diff 用 word 切分，对中日文等无空格语言效果有限；遇到时建议结合编辑器里的字符级 outline 一起看。
  • 数组对齐基于 id / key / name / uuid 启发式。如果你的数组元素既无稳定标识又顺序敏感，diff 结果会和按位置对比一致，可能仍然出现错位。
  • 几十 MB 的超大 payload 可能会拖慢浏览器。建议先截取相关子树，或使用命令行 diff 工具。
  • 所有处理在本地完成，但本地安全仍取决于你的设备、浏览器扩展、共享屏幕和复制目标。

常见问题

这里整理了关于结构化差异、长字符串 diff、键顺序、数组对齐、隐私和大型 payload 的常见问题。

我的 JSON 会上传到服务器吗？

不会。解析、对比、字符串 diff、复制和文件读取都在当前浏览器标签页内完成。DevKitLab 不会把你的 payload 发送到服务器。

左右两侧编辑器红绿高亮和右侧结构化列表为什么有时不一致？

编辑器里的红绿高亮按文本 diff，会受空白、键顺序、缩进影响；右侧结构化列表按语义 diff，只关心字段和值的实际改动。开启"忽略键顺序"并"格式化两侧"后两者通常一致。

"忽略键顺序"具体在做什么？

它在计算结构化差异时先递归把对象键排序，再 diff。所以 {"a":1,"b":2} 和 {"b":2,"a":1} 不会被视为不同。注意它只影响结构化面板，不改写编辑器；想让视觉 diff 也忽略键顺序，请点击"格式化两侧"。

数组中间插入一项为什么没把后面所有项都标成变化？

工具默认根据每个对象元素的 id / key / name / uuid / _id 字段做匹配，识别"哪个元素从哪里移到了哪里"。如果你的元素没有这些字段，会退化为按位置对比，这时插入一项确实会让后面整段被标为变化。

某个字段是长字符串，diff 只标了"被改变"，看不到具体差在哪？

右侧结构化面板会在长字符串改动下方自动展开词级红绿 diff，把删除的词标红、新增的词标绿。如果字符串特别长（> 20k 字符），为了避免卡顿会退化为整体红绿。

"折叠未变更"会不会把差异藏起来？

不会。它只折叠 diff 之外的大段相同内容，每个改动块上下各保留 3 行上下文。点击折叠条可以临时展开那一段；关闭这个选项可以恢复全文显示。

左右两侧的格式不一样（一个有缩进一个没有），diff 是不是会满屏红绿？

是的，因为编辑器按文本 diff。先点"格式化两侧"统一缩进，再看 diff 会清爽很多。结构化面板不受这个影响，因为它按语义对比。

"上一处 / 下一处"按钮按什么粒度跳转？

按 diff chunk（连续的变更块）跳转，而不是按结构化面板里的行。一个 chunk 可能对应面板里多条变化，反之一条字段改动可能跨越多个 chunk。

为什么我看到"移动"类型？

当数组中某个对象从一个位置挪到另一个位置（但内容不变）时，工具会识别为"移动"而不是"删除 + 新增"。这能帮你区分顺序调整和真正的内容变化。

左右编辑器关闭页面后内容还在吗？

在。左右输入会自动保存到 localStorage，下次打开页面时自动恢复。点击"清空"会同时清掉本地缓存。

它能处理很大的 JSON 文件吗？

几 MB 的 payload 通常没问题。几十 MB 的内容可能会拖慢浏览器，尤其是结构化 diff 部分。建议先截取相关子树，或使用命令行 diff 工具处理。

支持三路 diff（base / left / right）吗？

目前只支持两路对比。如果需要三路合并，建议交给 Git 自身的 merge 工具或 IDE 内置 diff 工具。

更多相关工具

可以继续在数据工具集合里完成 JSON 工作流：格式化、转换其他格式，或清理 payload 外层的文本包装。