帮我们把 JSON Workbench 做得更好!欢迎告诉我们你是怎么用的。

什么时候需要对比文件

项目跑久了,总会出现「明明昨天还好好的」:配置被人改过、两台机器上的 .env 不一致、自动生成的代码和上次不一样、发布前后的日志对不上。肉眼一行行比既慢又容易看漏,用 diff 工具可以直接告诉你:哪些行没变,哪些是新增、删除或修改。

这个文件对比工具只做一件事:把两段纯文本对齐,把不同的地方标出来,让你逐处检查。它不会帮你合并,也不会猜你的意图。不用上传,不用注册,也不需要后端。

配置对不上

对比不同版本或不同服务器上的 .env、nginx.conf、docker-compose.yml 或 Kubernetes 清单,马上找到被改动的那一行。

测试与生产环境差异

对比 staging 和 production 的环境变量或开关配置,在出事故之前发现漏配的 key 或被改反的布尔值。

检查自动生成的代码

提交之前,对比 OpenAPI 客户端、Protobuf 代码、迁移 SQL 等生成结果,只看真正发生变化的部分。

日志和数据对比

把两份日志、CSV 导出或 NDJSON 片段放在一起,新增和消失的行一眼就能看出来,方便排查回归问题和数据缺失。

导入文件

该编辑器接受文本(非二进制文件),并提供三种途径,最终都在同一个同步视图中结束。请选择最符合你当前内容位置的方法。

方法何时使用会发生什么
粘贴剪贴板里已经有一段片段,例如 PR 里的代码块、日志摘要,或通过 SSH 复制的配置。在需要的一侧点击粘贴,或者按 Ctrl+V / Cmd+V。该侧的编辑器会被剪贴板的文本替换,差异会立即重新计算。
上传内容保存在磁盘上,例如 .txt、.json、.yml、.xml 或任意基于文本的源文件。将文件拖入拖放区,或点击它以打开文件选择器。每侧只能接受一个文件。例如 .pdf、.png、.zip 或 .exe 这样的二进制文件会被拒绝,并弹出提示消息。大于 10MB 的文件将作为文件引用附加,采用分块流式读取的方式,而不是一次性全部读入内存。
工具移交你刚刚在不同标签页中解码了两个 Base64 载荷,想知道它们有什么不同,或者格式化工具的输出已准备好进行比较。在 Base64 页面上,每次解码都会打开一个编号标签页。将鼠标悬停在任意标签页上,点击 ⇄ 比对 图标,两个解码后的文本会以左和右的形式出现在这里,标签页名称作为文件名显示。同样的移交方式也适用于 JSON 比对:导航到此页面,内容会自动加载。
三种方式最终都填充同一对面板。每个面板上方的链接图标可以在 搜索 和 URL 导入 之间切换。URL 导入会直接获取远程文本,并自动将 GitHub 文件预览链接转换为其原始内容链接。

解析比对结果

比对结果是一个同步的并排视图:两个面板同步滚动,使一侧的每处变更都与另一侧对应的内容水平对齐。以下带注释的示意图展示了真实的界面布局:

文件 · 对比纯文本 · 左右对比
左侧 — app.env.example
1HOST=localhost
2PORT=3000−
3LOG_LEVEL=info
4TIMEOUT=30~
右侧 — app.env.production
1HOST=localhost
2PORT=8080+
3LOG_LEVEL=info
4TIMEOUT=60~
左侧面板是原文,右侧面板是修改文。装订线显示行号,内部标记列显示 +、− 或 ~ 分别代表添加、删除或更改。
1
已添加 (绿色)
仅在右侧存在的行。Monaco 将其渲染为绿色并放置 + 标记。在示例中,PORT=8080 仅在右侧出现,因为左侧缺少这一行。
2
已删除 (红色)
仅在左侧存在的行。它以红色显示并带有 − 标记和删除线。在生产环境中 PORT=3000 被删除了,你可以确切地看到位置。
3
已更改 (琥珀色)
成对的行内容不同。两侧都显示为琥珀色并带 ~ 标记,不同的部分会被内联高亮。TIMEOUT=30 → TIMEOUT=60 是一次编辑操作,而不是一次添加和一次删除。
4
已对齐且可搜索
未更改的行保持中性颜色并让两个面板对齐。每侧的搜索以及右上角的上一个 / 下一个更改箭头可在变更块间跳转而无需滚动。
在每个面板上方,工具栏提供搜索或URL导入功能、垃圾桶图标以清除该侧、匹配计数器、上下匹配项导航、复制、粘贴(仅在大于10MB的只读模式下禁用),以及修剪 (Trim) 功能。

浏览大文件

超过 10MB 的文件不适合作为 React 字符串属性来保存。无论是从粘贴还是放置的 File 对象输入,只要一侧超出此阈值,编辑器即切换为流式路径。

优化的只读模式

检测到大文件。为了保持性能已启用优化的只读模式。历史记录(撤销/重做)和代码折叠功能已禁用。正在按块加载并显示数据。

保持互动
  • 滚动、同步并排视图以及行号
  • 每侧搜索以及 URL 导入
  • 全局 上一个 / 下一个 变更导航
  • 复制及自动换行切换
暂时禁用
  • 编辑:两侧 readOnly 与 domReadOnly 均为 true
  • 修剪、格式化以及压缩等操作
  • 在大面板中粘贴
  • 缩略图、代码折叠、撤销/重做历史以及 JSON 诊断

10 MB 的阈值针对每一侧单独计算。低于该大小时,如果您刷新标签页,内容会自动保留。超过该大小时,文件会直接流式传输到查看器而不会被存储,因此刷新后将重新开始。清空两侧会让编辑器恢复到完整的交互模式。

限制与隐私

本页面的所有操作均在您的浏览器中运行。没有文件上传,没有服务器端处理,也没有超出当前比对所需范围的存储。

这也意味着限制是本地的,不受配额限制:

本地优先

文本永远不会离开设备。关闭标签页内容即消失;刷新页面存储将为空。

内存受限

在台式机上处理数十兆字节很轻松。实际的上限是标签页的可用内存。超大的单行文件是最难渲染的。

无上传

文件从您的设备本地读取。仅当您主动通过 URL 导入内容时,才会使用网络。

常见陷阱

初次进行文件比对的用户经常会对这些情况感到意外。这都是正常行为,并非 bug,且都有简单的解决办法。

只有空白字符的差异也使整行高亮▾
在文件模式下,ignoreTrimWhitespace 设置为 false,因此差异工具会将缩进和尾随空格视为有意义的变更。对于纯文本,空格也是数据。如果觉得烦人,请点击修剪 (Trim) 按钮:它会修剪每行、删除空白行,并将连续的多个空格折叠为一个。
CRLF 与 LF 使每一行都显示为已更改▾
来自 Windows 的文件以 CRLF (\r\n) 结束,而 macOS/Linux 以及大多数 git 检出使用 LF (\n)。修剪功能也可以处理这个问题:它将末尾的 \r 去除,将换行符标准化为 LF。
压缩过的 JSON 文件变成巨大的单行,比对结果看起来像是坏了▾
单行文件无处对齐,任何修改看起来都影响整个文件。水平滚动加上语法高亮功能也会受到影响。请先将内容通过 JSON 格式化工具 处理,将其展开为带缩进的多行,然后再拿回此处比较。
输出显示为乱码或 ▾
这是编码不匹配,并非文件损坏。该工具期望输入 UTF-8 编码的文件。以 Windows-1252 或 Latin-1 保存且包含重音字符的文件会显示乱码。请先将文件重新保存为 UTF-8(VS Code:右下角编码指示器 > 使用编码保存 > UTF-8),然后再进行比对。
只有修剪 (Trim) 按钮,没有格式化、压缩或语言切换功能▾
没错,这个页面只做纯文本的差异对比,只有「修剪」功能,没有格式化、压缩或切换语言。需要按 JSON 结构对比,请用 JSON 对比;需要整理格式,请用 JSON 格式化工具。

常见问题

我的文件会被上传吗?

不会。粘贴、拖入、从 URL 导入以及对比计算,全部在你的浏览器里完成,没有数据发送到服务器。关闭页面后内容就清空了。

可以对比哪些类型的文件?

任何文本文件都行,比如 .txt、.env、.json、.yml、各种源代码。PDF、图片这类二进制文件会在读取前被拦下。

「修剪」按钮具体做了什么?会改动我的文件吗?

会改动编辑器里的内容。它按行去掉首尾空白、删除空行,并把连续多个空格合并成一个。如果你的空行是有意保留的,用之前请注意。原始文件不会被修改。

最大能对比多大的文件?

没有硬性上限,但超过 10MB 会进入只读模式,实际能处理的大小取决于浏览器标签页的内存。

能直接对比 Base64 解码后的内容吗?

可以。在 Base64 页面里每次解码都会新开一个编号标签页,悬停在标签页上点 ⇄ 图标,再对第二个标签页做同样的操作,两段解码结果就会并排出现在这里。JSON 对比也可以用同样的方式把内容带过来。

和 JSON 对比、文件夹对比有什么区别?

JSON 对比理解 JSON 的结构,不受空白影响,适合 JSON 对比;整个目录请用文件夹对比;这个文件对比适合纯文本,尤其是空格也要计较、需要逐行严格对比的场景。

相关工具

文件差异看完后,如果内容是 JSON,可以先用 JSON 格式化工具校验,再用 JSON 对比忽略空白差异;要比较整个目录,请使用文件夹对比;遇到编码过的内容,用 Base64 解码。