[自荐] 做了一个 json diff 工具站,但是能支持 key 顺序不一致的情况进行 diff - V2EX
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
taihengw
V2EX    分享创造

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

  •  
  •   taihengw 75 天前 1371 次点击
    这是一个创建于 75 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

    主要功能

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

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

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

    链接: https://ignoreorderdiff.com/

    4 条回复    2025-08-06 00:22:48 +08:00
    natsukage
        1
    natsukage  
       75 天前   1
    这种工具有很多的吧(
    如果你单说网页的话,之前也有 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
        2
    Vegetable  
       74 天前
    我觉得你说这种情况非常奇怪。我不认为一个 JSON 对比工具缺失"忽略 key 顺序"这种关键功能是常态,所以搜索了一的 json diff,点进去第一个 https://jsondiff.com/就是会忽略顺序的工具。
    taihengw
        3
    taihengw  
    OP
       74 天前
    @natsukage 感谢很认真的使用和回复,我写这个工具的初衷还是为了解决我自己遇到的问题。我最近用的最多的场景是对 HTTP 返回结果做 diff ,需要从服务日志中去扒两次请求返回的 json 有哪些字段不同,我其实想要的效果就是对两段服务返回的 json 结构进行格式化,然后对齐进行 diff ,方便让我最快的看到都有哪些字段不一样。我也用了 Google 搜索来的 json diff 工具,感觉都没有很好的满足我是用的场景。
    jsoncompare 的体验很好,我之前都没有发现这个工具。不过我专门保留原有 json 格式,在新的模块上展示格式化和 diff 结果的原因是我对这段 json 的内容并不熟悉,我想在看到 diff 的时候能扫一眼这个字段原来在哪个位置上,帮助确认一下 diff 结果没错。
    折叠这个功能确实根据使用场景不同,每次体验的感受都不一样,我暂时也没有考虑到这一点,等用几天觉得不好用的话就改改。
    我其实实际对比的 json 结构大小也只有几十行,但是因为使用的场景是服务重构,需要保证重构前后的请求返回结果完全一致,所以对 diff 的结果展示的很细。对这个工具站的处理上限,我也没考虑太多,只是实现的时候让 cursor 随便写了一个最大上限支持 5M 的 json 大小。。。
    最后再谢谢大佬的感受,祝大佬天天开心!
    taihengw
        4
    taihengw  
    OP
       74 天前
    @Vegetable 确实是,看到你发的这个我又去试了下 jsondiff 这个工具,发现我试过这个,但是被它简陋的 UI 劝退了,还有我处理的 json 中有的字段是一个很长的文本,其实是嵌入了一段 xml 数据,在 jsondiff 处理的时候,这一行没有被自动换行,导致整个处理结果区域有的行非常长,我对比的时候左右滑动也很不方便,随意用了用就放弃了 jsondiff 。
    然后我今天白天用我自己的工具发现也有这个问题,连夜加个支持行折叠的可选功能上去。
    其他的 json diff 工具我也用了一些,但是感觉能支持排序后再 diff 的确实不对,大部分还是直接对文本做行匹配
    最后感谢大佬的回复,祝大佬没有烦恼!(*^^*)
    关于     帮助文档     自助推广系统     博客     API     FAQ     Solana     881 人在线   最高记录 6679       Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 25ms UTC 20:26 PVG 04:26 LAX 13:26 JFK 16:26
    Do have faith in what you're doing.
    ubao msn snddm index pchome yahoo rakuten mypaper meadowduck bidyahoo youbao zxmzxm asda bnvcg cvbfg dfscv mmhjk xxddc yybgb zznbn ccubao uaitu acv GXCV ET GDG YH FG BCVB FJFH CBRE CBC GDG ET54 WRWR RWER WREW WRWER RWER SDG EW SF DSFSF fbbs ubao fhd dfg ewr dg df ewwr ewwr et ruyut utut dfg fgd gdfgt etg dfgt dfgd ert4 gd fgg wr 235 wer3 we vsdf sdf gdf ert xcv sdf rwer hfd dfg cvb rwf afb dfh jgh bmn lgh rty gfds cxv xcv xcs vdas fdf fgd cv sdf tert sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf sdf shasha9178 shasha9178 shasha9178 shasha9178 shasha9178 liflif2 liflif2 liflif2 liflif2 liflif2 liblib3 liblib3 liblib3 liblib3 liblib3 zhazha444 zhazha444 zhazha444 zhazha444 zhazha444 dende5 dende denden denden2 denden21 fenfen9 fenf619 fen619 fenfe9 fe619 sdf sdf sdf sdf sdf zhazh90 zhazh0 zhaa50 zha90 zh590 zho zhoz zhozh zhozho zhozho2 lislis lls95 lili95 lils5 liss9 sdf0ty987 sdft876 sdft9876 sdf09876 sd0t9876 sdf0ty98 sdf0976 sdf0ty986 sdf0ty96 sdf0t76 sdf0876 df0ty98 sf0t876 sd0ty76 sdy76 sdf76 sdf0t76 sdf0ty9 sdf0ty98 sdf0ty987 sdf0ty98 sdf6676 sdf876 sd876 sd876 sdf6 sdf6 sdf9876 sdf0t sdf06 sdf0ty9776 sdf0ty9776 sdf0ty76 sdf8876 sdf0t sd6 sdf06 s688876 sd688 sdf86