一款清新的JSON格式化工具

软件名称

JSONT

应用平台

Web

推荐类型

【开发者自荐】

一句简介

JSONT是一个在线JSON验证和格式化工具,包含美化、编辑、分享等功能,同时也做到了简洁和易用。

应用简介

JSONT作为一款JSON格式化网站,主要包含了以下功能

  • JSON验证和格式化、下载
  • JSON编辑(添加子元素、修改KEY和VALUE、数组包含等)
  • JSON分享(一键获取分享链接)
  • JSON保存(本地保存和云端保存)




官方网站

www.jsont.run

我们的核心愿景是开发“简洁易用”的软件,同时有着丰富的实用功能。

手機端的適配需要再調整下。

http://ejsoon.win/json/

現在我用的json編輯器,既能真正的較驗json格式,在美觀及實際使用上又能當作一個筆記軟件来用。

目前还没做手机端适配,安排

这个我知道,是国外的一款开源的好像,很多都是用的这个,不过个人不太喜欢这种

截图里的应该是这个

我在这里看到过

尝试上手了一下,简单反馈几个问题。

这是我最常用也是这一次用作对比的JSON工具

JSON-handle

这是我用作测试的JSON

问题1:操作较大JSON文件时会有卡顿现象。

在通过复制黏贴方式导入上面测试JSON时,会有明显卡顿现象。同时点击全部展开等操作,也会卡顿。

好像是解析后的视图那半边,每当进行修改都会重新绘制,所以东西多了就会卡。

问题2:无法从解析后的视图进行局部复制

复制出来会变成这样

其实可以在右侧小按钮加一个复制嘛

问题3:当在右侧对某个值回车之后,出现了以外的解析问题

像这样

本来的样子

敲回车

失去焦点时

再次点击输入框然后再转移焦点

JSON-handle是这样处理的

原本

回车


其实也不是很明显,因为可视化了,只有右侧显示了换行,左侧没展示,我觉得也不太好



但是其源代码可以看到是正常的加了换行符号

这个问题可能是允许用户输入和修改的时候,如果是字符串没有自动取消双引号,也没有判断换行符号,强行转义造成的。


  • 小建议1:我看到这个有vscode工具和win商店版本,有没有想法再继续做成扩展,就像JSON-handle一样当返回内容是application/json时自动展示?
  • 小建议2: 既然源代码一直在左侧显示,可否考虑在右侧跳转到某个子节点时,源代码同步滚动到对应位置?
  • 小建议3: 压缩和美化按钮是操作源代码的,建议把按钮挪到源代码视图顶上,而不是解析后的,可能会有操作歧义。
  • 小建议4: 这个是个人强迫症,鼠标悬停节点显示4个按钮时,进入动画应该更快一些。兵器,并且鼠标悬停的时候希望可以有一个按钮含义的提示,并且希望可以稍微放大一些,毕竟按钮小,分辨图案和点击都会有点小小的费劲。
1 Like

有心了,非常感谢这样的反馈。针对您提到的几个问题,我大概回复一下

问题1:针对大JSON文件的操作后续还会针对性地做性能优化

问题2:这个需求忽略了,紧接着就加上

问题3:还没想好,禁止换行?或者换行就表示修改完成的确认?

小建议1:目前针对vscode只做了一个分享的功能,因为考虑到本身vscode就是一个编辑器,能够对JSON有很好的格式化和编辑,windows store其实是包了PWA,和网站本身无异。自动展示这个我也有考虑过,主要是针对浏览器的,我一开始是想在F12的network请求的pannel里面加上一个快捷链接,点击即可将当前的返回带到jsont中查看,不过chrome好像不支持这样的扩展,再一个就是在新窗口打开接口可以直接格式化,这个我看Fehelper做成了这样,但是针对需要验证的接口或者非GET接口也没法新窗口打开,我感觉意义不是特别大,所以就暂停chrome插件的开发了。

小建议2: 这个我感觉实现的难度有点大,因为左侧本身是一个文本域,不好定位,其次我觉得加了编辑复制功能之后,是不是就不需要去关心左侧的源码位置了呢。

小建议3: 这个也有考虑过,后面对于顶部的操作按钮可能会做成用户可自定义配置的,喜欢怎么摆就怎么摆

小建议4: 这个编辑其实一开始是想弱化的,所以默认都没有打开,不过确实可能体验不咋好,这一块后期会优化哈。

关于问题3,我个人更倾向于,在可视化后的界面里允许任何合法输入,然后在失去焦点后自动转为对应的JSON,比如换行自动替换为\n这样。同时,也可以允许Ctrl+Enter这样的组合键完成确认。

关于小建议1:我不太了解chrome扩展制作方式。但是我的想法有两种实现方式:

  • 主动触发,判断回应的头,如果是json就可以触发。在F12里虽然不能在network里添加,但是我见过扩展可以直接添加整个自定义tab的,也不是不行。
  • 被动触发,作为扩展图标放在右上角,需要的时候点击图标,判断当前页面是不是json,是的话就启动格式化工具。

关于小建议2,我在想一个问题,如果我导入json是为了可视化操作,然后可以导出和局部复制之后,左侧窗口JSON源码是不是并不是必须存在的呢?

关于小建议4,其实我也看出来这似乎弱化了编辑功能,标题本身也是格式化工具。不过另一个想法,如果可以在用户想要编辑时编辑,不想编辑时不会修改,这样其实就完全不需要开关编辑模式了。另外我觉得小按钮使用体验似乎没有自定义右键菜单来的舒服…

谢谢

关于问题3 赞同

关于小建议1 F12的确可以加整个tab,不过好像没啥意义,这里更好的是加到每一个具体的请求上,在查看每个请求的response的时候,有一个按钮可以点击跳转到jsont的网站,目前好像无法实现。被动触发这个可以考虑一下

关于小建议2 左侧窗口应该存在,因为涉及到输入和修改源内容,只不过可以考虑是否支持隐藏和折叠

关于小建议4 右键这个很赞,之前一直在思考如何摆放这个操作菜单

已对大文件做了解析优化,基本不卡了,可以尝试看看,顺便可以对比一下你用过的其它JSON格式化网站

大文件导入确实肉眼可见的不卡了,而且我也看到小图标被整合到菜单中,而且一些按钮被移动到左侧窗口了,更整洁了,点赞。

换行这个仍然有待优化。

图片

image

另外,新的bug:

  • 当我修改了某个节点的键名,然后在点击自节点时,右上角节点路径不会更新,仍然显示修改之前的名字。
图片

修改之前:
image

features=>newname
image

  • 暗黑模式适配问题
图片

image

image

以及,我想问一下,如果我之前数据全部存储在本地,之后创建账户开启云端模式…
我文件有没有批量直接上传到云端的方法?我看到只有文件夹还在左侧,文件不能直接移动过去。

图片

本地
image

切换到云端
image
没有立刻刷新?那我现在存储的话会存到哪里?

刷新页面
image
emmm…

还有,同一个文档点击分享后会生成连接,但是如果x掉再点击,会生成一个新的,哪怕完全没有修改过,并且上一个才生成完毕,这个我觉得也许也可以优化一下…(至少能看之前分享过的连接以及取消掉?)

1 Like

谢谢反馈,因为修改了解析逻辑,所以节点的操作逻辑会变得比较麻烦,这一块的问题接下来就会解决。包括暗黑模式这个。

关于数据这个,其实我跟你一样很早就想到了,之前全在本地如何一键转到云端,以及我之前都存在云端,到了另外一台电脑上我想把这些数据都转到本地。我觉得还是很有必要的,接下来会纳入开发计划中。

关于分享这个其实是做成了临时的,在1小时之后数据会被清掉,所以没有去做状态的保留,你的这个需求我觉得应该是对一个保存过的文件进行分享,分享出去之后再次对文件进行编辑分享的内容也会随之改变,是 保存的文件+分享模式

1 Like

补充一个功能需求,希望可以增加查找某个键的功能。我用 Ctrl+F 可以在源码中搜索到对应键,但是并没有在美化后的窗口中直接搜索到。

是不是折叠了?折叠之后没有渲染,展开的是能搜到的

应该没有折叠。

知道了,因为采用了按需渲染,所以可视区外的内容都没有渲染,看来是得加上搜索功能了

1 Like

已上线搜索功能,麻烦看看有没有什么问题

好的。可能还是按需加载功能产生的问题,假如我在一个比较大的json里在开头搜索一个在结尾的key时,不会自动滚动到对应位置。

举例:
JSON文件
搜索:/Upgrades/Mods/Archwing/Rifle/ArchwingDualStatSlashStatusMod

谢谢反馈,已修复

1 Like