# JSON 差异可视化

比较两个 JSON 并生成带颜色、路径和统计信息的可视化差异报告

> 标准页面: https://elysiatools.com/zh/tools/json-diff-visualizer

- **分类:** Development

- **关键词:** json, diff, visualizer, compare, developer, api, payload

## 概述

粘贴两份 JSON，工具会递归比较对象、数组和值，并输出带有新增、删除、变更和未变化统计的 HTML 差异报告。

## 输入项

- **左侧 JSON** (textarea)
- **右侧 JSON** (textarea)
- **左侧标签** (text)
- **右侧标签** (text)
- **显示未变化值** (checkbox)
- **对象键排序** (checkbox)
- **最大行数** (number)

## 适用场景

- 需要对比不同版本的 API 响应数据，快速找出新增、删除或修改的字段时。
- 调试配置文件，排查测试环境与生产环境 JSON 配置差异时。
- 验证前端发送的请求 Payload 与后端接收的数据结构是否一致时。

## 工作原理

- 在左侧和右侧输入框中分别粘贴需要对比的两份 JSON 数据。
- 根据需要配置对比选项，如设置左右侧标签、是否显示未变化值以及是否对对象键进行自动排序。
- 工具将递归解析并对比两份 JSON 的键值对，生成包含新增、删除和修改统计的 HTML 可视化差异报告。

## 使用案例

- API 版本迭代对比：对比新旧 API 接口返回的 JSON 结构，快速确认字段变更。
- 多环境配置校验：比对开发环境与生产环境的 JSON 配置文件，防止配置遗漏。
- 前端 Payload 调试：对比实际发送的请求体与预期 JSON 模板，排查参数格式问题。

## 常见问题

### 这个工具如何处理未排序的 JSON 键？

工具默认开启“对象键排序”功能，在对比前会自动对 JSON 键进行排序，避免因键顺序不同而产生误报。

### 我可以只查看发生变化的字段吗？

可以，默认情况下“显示未变化值”为关闭状态，工具将仅高亮展示新增、删除或修改的差异项。

### 差异报告中如何区分不同类型的变更？

报告通过不同的颜色和标记直观区分：绿色代表新增，红色代表删除，黄色或特定高亮代表值或类型的变更。

### 工具支持对比的最大行数是多少？

您可以通过“最大行数”选项进行设置，默认支持 300 行，最大可配置为 2000 行。

### 数据安全吗？我的 JSON 会被上传到服务器吗？

所有的 JSON 解析与差异对比均在您的浏览器本地完成，数据不会被上传或存储到任何服务器。

## 相关工具

- [深度去重](https://elysiatools.com/zh/tools/uniq-with): 使用 lodash _.uniqWith 进行深度去重
- [无限制AI多语言标题翻译器](https://elysiatools.com/zh/tools/unlimited-ai-title-translator-multi): 专业的AI驱动多语言标题翻译工具，支持同时翻译到多种语言，输出JSON格式，适用于电影、电视剧、动漫、游戏等各类作品
- [BOM字符移除器](https://elysiatools.com/zh/tools/data-bom-remover): 从文本和文件内容中移除BOM（字节顺序标记）字符。非常适合清理有编码问题的文本文件、修复CSV导入和为处理准备数据。 功能特点： - 检测并移除UTF-8 BOM (EF BB BF) - 检测并移除UTF-16 BOM (FE FF 或 FF FE) - 检测并移除UTF-32 BOM (00 00 FE FF 或 FF FE 00 00) - 支持多种输入格式 - 可视化BOM字符显示 - 详细检测报告 - 支持批量文本处理 常见用途： - 修复CSV文件导入错误 - 清理文本文件编码问题 - 为JSON解析准备数据 - 修复XML解析问题 - 解决API数据编码冲突 - 标准化文本数据格式
- [文本 NLP 标注工作台](https://elysiatools.com/zh/tools/text-nlp-annotation-workbench): 使用可解释的本地规则完成分词、句子切分、停用词、词形、词干、实体和 n-gram 标注，并导出 JSONL 或 CoNLL。
- [XLSX 列映射器](https://elysiatools.com/zh/tools/xlsx-column-mapper): 按规则重命名/重排/删除列，支持别名、大小写、空格处理
- [CSV数据分组器](https://elysiatools.com/zh/tools/csv-data-grouper): 按指定列对CSV数据进行分组，支持聚合选项。非常适合按类别、日期或其他标准来总结和分析大型数据集。
- [JSON键提取器](https://elysiatools.com/zh/tools/json-key-extractor): 从JSON对象中提取所有键，支持多种输出格式。非常适合分析JSON结构、生成文档和理解复杂的嵌套对象。
- [按条件移除](https://elysiatools.com/zh/tools/remove-by-predicate): 使用 lodash _.remove 按条件移除数组元素

## 示例

- [Terraform Plan JSON 样本](https://elysiatools.com/zh/samples/terraform-plan-json-samples): 用于依赖可视化和变更审查的 Terraform plan JSON 文件样本，贴近 terraform show -json 输出结构
- [聊天记录 JSON 示例](https://elysiatools.com/zh/samples/chat-transcript-json): 多角色聊天记录的 JSON 示例
- [JSON 示例](https://elysiatools.com/zh/samples/json): JSON（JavaScript 对象表示法）格式示例，从简单到复杂结构
- [富媒体 JSON 示例](https://elysiatools.com/zh/samples/rich-media-json): 常见富文本编辑器（TipTap、Quill、Slate）的 JSON 示例

## 相关内容

- [文件与数据差异对比工具](https://elysiatools.com/zh/hubs/file-data-diff-comparison-tools): 比较两个候选产物，先按格式选择合适的 diff 路径，再补做结构或语义复核，并在需要严格验收时完成完整性校验。