最近在测试 HTTP 的接口返回结果,需要进行新旧服务版本的返回值对比,想找个现成的 json diff 工具直接用,发现竟然都不支持 json 中 key 顺序不一致的情况,所以自己用 cursor 写了一个工具站出来,有需要的也可以试用下
全部代码都是用 Cursor 写的,在常见 json diff 工具基础上加了对 key 排序的功能:
网站现在部署在 vercel 上,欢迎各位大佬试用,有任何问题或者建议都可以反馈❤️
1
natsukage 28 天前 ![]() 这种工具有很多的吧(
如果你单说网页的话,之前也有 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 的实现,它现在的形态我觉得就挺直观了,在此基础上再增加自己额外的功能与特性 |
![]() |
2
Vegetable 27 天前
我觉得你说这种情况非常奇怪。我不认为一个 JSON 对比工具缺失"忽略 key 顺序"这种关键功能是常态,所以搜索了一的 json diff,点进去第一个 https://jsondiff.com/就是会忽略顺序的工具。
|
![]() |
3
taihengw OP @natsukage 感谢很认真的使用和回复,我写这个工具的初衷还是为了解决我自己遇到的问题。我最近用的最多的场景是对 HTTP 返回结果做 diff ,需要从服务日志中去扒两次请求返回的 json 有哪些字段不同,我其实想要的效果就是对两段服务返回的 json 结构进行格式化,然后对齐进行 diff ,方便让我最快的看到都有哪些字段不一样。我也用了 Google 搜索来的 json diff 工具,感觉都没有很好的满足我是用的场景。
jsoncompare 的体验很好,我之前都没有发现这个工具😂。不过我专门保留原有 json 格式,在新的模块上展示格式化和 diff 结果的原因是我对这段 json 的内容并不熟悉,我想在看到 diff 的时候能扫一眼这个字段原来在哪个位置上,帮助确认一下 diff 结果没错。 折叠这个功能确实根据使用场景不同,每次体验的感受都不一样,我暂时也没有考虑到这一点,等用几天觉得不好用的话就改改。 我其实实际对比的 json 结构大小也只有几十行,但是因为使用的场景是服务重构,需要保证重构前后的请求返回结果完全一致,所以对 diff 的结果展示的很细。对这个工具站的处理上限,我也没考虑太多,只是实现的时候让 cursor 随便写了一个最大上限支持 5M 的 json 大小。。。 最后再谢谢大佬的感受,祝大佬天天开心!👍🏻 |
![]() |
4
taihengw OP @Vegetable 确实是,看到你发的这个我又去试了下 jsondiff 这个工具,发现我试过这个,但是被它简陋的 UI 劝退了,还有我处理的 json 中有的字段是一个很长的文本,其实是嵌入了一段 xml 数据,在 jsondiff 处理的时候,这一行没有被自动换行,导致整个处理结果区域有的行非常长,我对比的时候左右滑动也很不方便,随意用了用就放弃了 jsondiff 。
然后我今天白天用我自己的工具发现也有这个问题,连夜加个支持行折叠的可选功能上去😂。 其他的 json diff 工具我也用了一些,但是感觉能支持排序后再 diff 的确实不对,大部分还是直接对文本做行匹配 最后感谢大佬的回复,祝大佬没有烦恼!(*^▽^*) |