联调接口返回变更
后端在凌晨改了订单查询接口的响应结构，把 `user_name` 挪到了 `profile` 对象里，还新增了 `vip_level`。前端联调时发现页面数据不显示，用本工具对比新旧两份 JSON 响应，高亮看到字段路径从 `$.user_name` 变成 `$.profile.user_name`，直接定位到改动点，通知后端改回或同步更新前端解析逻辑。
开发者工具 · JSON / 数据格式
JSON Diff
高亮增删改/路径定位
✓本地处理 · 不上传
✓免费 · 无需登录
✓无次数限制
原 / 旧 JSON A · old
新 JSON B · new
就绪 · 两侧粘贴 JSON，点「对比」逐路径标记增删改
点「对比」生成差异 —— 或先点工具条「示例」
第一节
关于本工具
About调试接口返回的 JSON 差异时，眼睛扫过几百行缩进找一处字段值变动，是多数开发者的低效时刻。这个工具将两段 JSON 并排解析，用增删改三种颜色标记每个节点的变化，并给出从根到该节点的完整路径。纯浏览器处理，JSON 内容不会离开本机——适合在代码审查、配置比对、数据迁移验证中快速定位具体改动点。
使用场景
配置中心误提交
运维在 Nacos 上误提交了生产环境的 JSON 配置，把数据库连接池 `maxActive` 从 50 改成了 500。应用重启后连接池被打爆，服务告警。回滚前用本工具对比当前配置和上一版本的备份，高亮标出 `maxActive` 的数值变更，确认只有这一个字段被改，快速回滚并通知团队。
接口文档与实现不一致
测试人员发现新上线的商品详情接口返回的 `price` 字段在文档里写的是 `number`，但实际返回了 `"99.9"` 字符串。用本工具对比接口实际返回的 JSON 与文档示例 JSON，高亮显示 `price` 的 `type` 差异，定位到具体路径，提交 bug 单给后端修复类型转换逻辑。
日志分析定位异常
线上一个用户反馈订单状态异常，排查日志发现某次请求的 `order_status` 字段在 A 服务返回 `"paid"`，B 服务消费后变成了 `"refunded"`。用本工具对比两个服务日志中该订单的 JSON 片段，高亮出 `order_status` 的差异，并通过路径定位到该字段，确认是 B 服务状态机逻辑错误。
数据迁移后校验
将旧系统的用户数据迁移到新系统，涉及 10 万条记录。迁移脚本跑完后，随机抽取 100 条，把旧系统的 JSON 导出和新系统的 JSON 导出用本工具逐条对比。高亮标出 `phone` 字段格式从 `"138-0000-0000"` 变成 `"13800000000"` 的差异，定位到路径后修正迁移脚本的清洗规则。
第二节
使用指南
Getting Started使用步骤
- 1在左侧粘贴区放入旧版 JSON，右侧放入新版 JSON，两侧编辑器自动并排显示
- 2点击「比较」按钮，差异区域立即高亮：绿色=新增行，红色=删除行，黄色=修改行
- 3点击任意高亮行，顶部路径栏显示该节点在 JSON 树中的完整路径（如 data.users[2].name）
- 4在结果区顶部筛选「仅显示差异」，隐藏无变更行，聚焦改动内容
输入输出示例
| 输入 | 输出 | 说明 |
|---|---|---|
| 左侧：{"name":"张三","age":30} 右侧：{"name":"张三","age":31} | { "name": "张三", "age": <span style="background-color:#ffcccc">30</span><span style="background-color:#ccffcc">31</span> } | 常规：仅修改一个字段值，验证基本修改检测与高亮 |
| 左侧：{"a":1,"b":2} 右侧：{"a":1,"b":2,"c":3} | { "a": 1, "b": 2, <span style="background-color:#ccffcc">"c": 3</span> } | 常规：仅新增一个字段，验证新增检测 |
| 左侧：{"a":1,"b":2,"c":3} 右侧：{"a":1,"b":2} | { "a": 1, "b": 2, <span style="background-color:#ffcccc">"c": 3</span> } | 常规：仅删除一个字段，验证删除检测 |
| 左侧：{} 右侧：{} | {} | 边界：两个空对象，验证无差异时的输出（不应报错或输出任何高亮） |
| 左侧：{"a":1} 右侧：{"a":"1"} | { "a": <span style="background-color:#ffcccc">1</span><span style="background-color:#ccffcc">"1"</span> } | 边界：值类型不同（数字 vs 字符串），验证类型敏感度 |
| 左侧：{"a":null} 右侧：{"a":0} | { "a": <span style="background-color:#ffcccc">null</span><span style="background-color:#ccffcc">0</span> } | 易错：null 与 0 的差异，新手常误认为等价 |
| 左侧：{"list":[1,2,3]} 右侧：{"list":[1,2,4]} | { "list": [ 1, 2, <span style="background-color:#ffcccc">3</span><span style="background-color:#ccffcc">4</span> ] } | 易错：数组内元素修改，验证数组索引级差异检测 |
常见错误对照
1.JSON 末尾多余逗号导致解析失败
✗ 错误
{"name": "Alice", "age": 30,}✓ 修复
{"name": "Alice", "age": 30}JSON 规范（RFC 8259）禁止对象或数组最后一个元素后出现逗号。多数 JSON 解析器会直接报错，导致 diff 工具无法加载输入。
2.使用单引号代替双引号包裹键名
✗ 错误
{'name': 'Bob'}✓ 修复
{"name": "Bob"}JSON 标准要求键名必须用双引号。单引号是 JavaScript 对象字面量语法，不是合法 JSON，diff 工具会解析失败。
3.字符串值未转义内部双引号
✗ 错误
{"message": "他说"好的""}✓ 修复
{"message": "他说\"好的\""}JSON 字符串内的双引号必须用反斜杠转义，否则解析器会误认为字符串提前结束，导致结构错乱。
4.布尔值 / null 写成字符串
✗ 错误
{"active": "true", "data": "null"}✓ 修复
{"active": true, "data": null}JSON 中 true、false、null 是字面量，不加引号。加引号后变成普通字符串，diff 会将其视为与字面量不同的值，产生误报差异。
5.数字值包含前导零或多余小数点
✗ 错误
{"version": 01.5, "ratio": 3.14.15}✓ 修复
{"version": 1.5, "ratio": 3.1415}JSON 数字不允许前导零（除非是 0.x），也不允许多个小数点。这类写法会被解析器拒绝，导致输入无效。
6.忘记对路径中的键名转义特殊字符
✗ 错误
想对比键名为 "a.b" 的值，路径写为 $.a.b✓ 修复
$["a.b"]JSON Path 中，点号是层级分隔符。如果键名本身包含点号（或空格、中文等），必须用方括号加引号形式访问，否则路径会错误地指向不存在的子节点。
7.把 JavaScript 注释混入 JSON
✗ 错误
{"name": "Charlie" /* 这是注释 */}✓ 修复
{"name": "Charlie"}JSON 标准不支持注释。虽然某些解析器（如 VSCode 的 settings.json）允许注释，但标准 JSON diff 工具会报语法错误。
第三节
工作原理
How It Works核心公式
diff(A, B) = { added: B \ A, removed: A \ B, changed: { k: (A[k], B[k]) | A[k] ≠ B[k], k ∈ A ∩ B } }
变量说明
A左侧 JSON 对象或数组B右侧 JSON 对象或数组addedB 中有但 A 中没有的键值对removedA 中有但 B 中没有的键值对changed键相同但值不同的键值对
示例
左侧 A = {"name":"张三","age":30,"city":"北京"}，右侧 B = {"name":"张三","age":31,"city":"上海","job":"工程师"}。added = {"job":"工程师"}，removed = {}，changed = {"age":(30,31),"city":("北京","上海")}。最终输出：新增 1 项、修改 2 项、删除 0 项。
用户输入
本地处理
输出结果
第五节
常见问题
Q & A问两个 JSON 里面 key 顺序不一样，能比较出来吗？＋
答
能。本工具基于 JSON 结构比较，不依赖 key 的书写顺序。例如 {"a":1, "b":2} 和 {"b":2, "a":1} 会被判定为完全一致，不会产生误报的差异。如果希望严格按顺序比对（如保留文件原始顺序），请使用其他支持有序比较的工具。
问JSON 里有个字段值特别长，高亮差异时根本看不清改了哪里，怎么办？＋
答
本工具对长字符串采用「截断 + 差异定位」策略：差异区域会高亮并显示路径，点击高亮块可在下方详情区查看完整的前后对比。如果还是看不清，建议先用外部工具（如 jq）将长字段提取出来单独比对，或者将 JSON 格式化后复制到本工具重新比较。
问为什么我贴了 JSON 进去，提示「解析失败」？＋
答
最常见的原因是 JSON 格式不合法。请检查：1）字符串必须用双引号，不能用单引号；2）最后一个属性后面不能有逗号；3）键名必须用双引号包裹。本工具在输入框下方有实时语法校验提示，红色波浪线标出出错位置。如果 JSON 来自后端日志，注意是否混入了注释（// 或 /* */），JSON 标准不允许注释。
问这个工具能比较多层嵌套的 JSON 吗？比如 10 层那种。＋
答
可以。本工具递归比较任意层级的嵌套结构，并会在结果区用路径定位到具体差异节点（如 data.items[3].config.limits.max）。实测 20 层嵌套、单文件 500KB 的 JSON 能在 1 秒内完成比对。如果嵌套极深且文件巨大（>2MB），建议分块比对，因为浏览器内存有限。
问为什么结果里显示删除了一个节点，但我明明只是改了它的值？＋
答
本工具显示的是「节点级别的增删改」：如果一个 key 从对象 A 移到对象 B（层级变化），会被标记为删除 + 新增，而不是修改。如果你只想看值变化而忽略路径变动，建议先将两个 JSON 重排为相同结构再比较。路径定位功能会精确显示每个差异的完整路径，方便判断是否为结构变化。
问两个 JSON 都很大（几万行），这个工具会不会卡死？＋
答
本工具纯前端运行，不经过服务器，因此没有上传大小限制。但浏览器处理能力有限：实测 1MB 以内的 JSON 可流畅交互，2-5MB 可能出现几秒延迟，超过 10MB 建议拆分比对。如果卡住，可以按 F12 打开控制台看是否有内存溢出警告。对于超大文件，推荐使用命令行工具如 jq diff。
问对比结果里的绿色、红色、黄色分别代表什么？＋
答
绿色高亮表示新增内容（左侧没有、右侧有）；红色高亮表示删除内容（左侧有、右侧没有）；黄色高亮表示修改内容（两侧都有但值不同）。每个差异块左侧会显示路径（如 root.settings.timeout），点击路径可直接定位到该节点。如果同一行同时出现红绿，表示该位置既有删除又有新增（即替换）。
问我贴的是两个 API 返回的 JSON，但里面有个时间戳每次都不一样，怎么忽略这个字段？＋
答
目前本工具不支持手动设置忽略字段列表。临时方案：在粘贴前用文本替换工具将两个 JSON 中的该时间戳值统一替换为固定占位符（如 "__IGNORE__"），再粘贴进来比对。如果经常需要忽略特定字段，建议使用支持过滤规则的专用 diff 工具（如 jsondiffpatch 库）。
问这个工具会上传我的 JSON 数据到服务器吗？公司数据比较敏感。＋
答
不会。本工具完全在浏览器本地运行（纯前端实现），所有 JSON 数据仅存在于当前页面的内存中，不会发送到任何服务器。刷新页面或关闭标签页后数据即销毁。可以断网测试：断开网络后刷新页面，工具仍然能正常使用。适合处理包含敏感信息的配置文件或 API 响应。
隐私保证所有计算与处理均在你的浏览器本地完成，输入数据不会上传服务器，也不会保存或共享。