[自荐] 做了一个 json diff 工具站，但是能支持 key 顺序不一致的情况进行 diff

[taihengw]

最近在测试 HTTP 的接口返回结果，需要进行新旧服务版本的返回值对比，想找个现成的 json diff 工具直接用，发现竟然都不支持 json 中 key 顺序不一致的情况，所以自己用 cursor 写了一个工具站出来，有需要的也可以试用下

主要功能

全部代码都是用 Cursor 写的，在常见 json diff 工具基础上加了对 key 排序的功能：

• 智能对比 JSON ，自动忽略 key 的顺序
• 清楚标出真正的差异：新增（绿色）、删除（红色）、修改（黄色）
• 支持多种查看模式：左右对比、统一视图、纯差异模式
• 纯前端处理，数据不会上传到服务器
• 支持文件上传和拖拽，还有一些常用的示例数据

网站现在部署在 vercel 上，欢迎各位大佬试用，有任何问题或者建议都可以反馈❤️

链接： https://ignoreorderdiff.com/

[natsukage]

这种工具有很多的吧（
如果你单说网页的话，之前也有 https://jsoncompare.com/

楼主的工具比起 jsoncompare 来说有一个比较大的问题在于你的 compare 不是直接在原 json 中进行对比，而是先格式化后再进行对比，而且你格式化后的 json 还不能折叠显示，所以对于大 json 来说观感非常差。这是个很要命的问题，因为需要特地去用工具对比的往往都是大 json ，如果只有几行不需要折叠也能看全的 json 往往根本不需要工具，用肉眼就直接看出区别了。

不能折叠，而且强制格式化让每一项分行在很多时候观感会非常糟糕，比如
"skills": ["JavaScript", "Python", "React"] 和 "skills": ["JavaScript", "Python", "React", "Vue.js"] 这两行（这只是举个例子，实际上里面可能有几十上百个项目）
这一行之所以折叠为了一行，很大原因就是因为我只关注“哦，这两个返回结果的 skill 不一样”，而并不关心到底它不一样的 skill 具体是什么，是多了 C#还是少了 java ，我只需要知道有差异的地方在 skill 这项里就行了。

但是你的项目里，你会给"Vue.js"单独列一行并标绿，而"skills"这行本身就没有标绿了，这就导致 Side by Side 视图本身直观程度大减。而 Unified 和 Differences Only 的直观程度显然是远不如 Side by Side 视图的。此外，假如 skills 里面有成百上千项，而其中有几个项目有差别的话，我又不能对 skill 进行折叠，这个上下翻页对比的体验实在有点差。

我觉得你完全可以参考 jsoncompare.com 的实现，它现在的形态我觉得就挺直观了，在此基础上再增加自己额外的功能与特性

[Vegetable]

我觉得你说这种情况非常奇怪。我不认为一个 JSON 对比工具缺失"忽略 key 顺序"这种关键功能是常态，所以搜索了一的 json diff,点进去第一个 https://jsondiff.com/就是会忽略顺序的工具。

[taihengw]

@natsukage 感谢很认真的使用和回复，我写这个工具的初衷还是为了解决我自己遇到的问题。我最近用的最多的场景是对 HTTP 返回结果做 diff ，需要从服务日志中去扒两次请求返回的 json 有哪些字段不同，我其实想要的效果就是对两段服务返回的 json 结构进行格式化，然后对齐进行 diff ，方便让我最快的看到都有哪些字段不一样。我也用了 Google 搜索来的 json diff 工具，感觉都没有很好的满足我是用的场景。
jsoncompare 的体验很好，我之前都没有发现这个工具😂。不过我专门保留原有 json 格式，在新的模块上展示格式化和 diff 结果的原因是我对这段 json 的内容并不熟悉，我想在看到 diff 的时候能扫一眼这个字段原来在哪个位置上，帮助确认一下 diff 结果没错。
折叠这个功能确实根据使用场景不同，每次体验的感受都不一样，我暂时也没有考虑到这一点，等用几天觉得不好用的话就改改。
我其实实际对比的 json 结构大小也只有几十行，但是因为使用的场景是服务重构，需要保证重构前后的请求返回结果完全一致，所以对 diff 的结果展示的很细。对这个工具站的处理上限，我也没考虑太多，只是实现的时候让 cursor 随便写了一个最大上限支持 5M 的 json 大小。。。
最后再谢谢大佬的感受，祝大佬天天开心！👍🏻

[taihengw]

@Vegetable 确实是，看到你发的这个我又去试了下 jsondiff 这个工具，发现我试过这个，但是被它简陋的 UI 劝退了，还有我处理的 json 中有的字段是一个很长的文本，其实是嵌入了一段 xml 数据，在 jsondiff 处理的时候，这一行没有被自动换行，导致整个处理结果区域有的行非常长，我对比的时候左右滑动也很不方便，随意用了用就放弃了 jsondiff 。
然后我今天白天用我自己的工具发现也有这个问题，连夜加个支持行折叠的可选功能上去😂。
其他的 json diff 工具我也用了一些，但是感觉能支持排序后再 diff 的确实不对，大部分还是直接对文本做行匹配
最后感谢大佬的回复，祝大佬没有烦恼！(*^▽^*)