发现一款 JSON 可视化工具神器,太爱了!

点击上方“芋道源码”,选择“设为星标

管她前浪,还是后浪?

能浪的浪,才是好浪!

每天 10:33 更新文章,每天掉亿点点头发...

源码精品专栏

 

来源:网络

664ce3916b9f1346630e4fdd82309eec.jpeg


JSON Hero 是一个简单实用的 JSON 工具,通过简介美观的 UI 及增强的额外功能,使得阅读和理解 JSON 文档变得更容易、直观。

支持多种视图以便查看 JSON:列视图、树视图、JSON 视图等 列视图是受 macOS Finder 启发创建的一种浏览 JSON 文档的新方法。

1314f4eb04e8b96e467ee2198bedc8f9.jpeg

项目地址:https://github.com/jsonhero-io/jsonhero-web

安装

要在本地运行 JSON Hero,首先 clone 源代码,并安装相关依赖项:

git clone https://github.com/jsonhero-io/jsonhero-web.git
cd jsonhero-web
npm install

然后运行以下命令启动,打开 http://localhost:8787 即可使用:

npm start

使用

前往https://jsonhero.io/ 并将 JSON 文件拖拽到网站上,或在提供的表单中粘贴 JSON 或 JSON url

内容预览

JSON Hero 会自动推断字符串的内容,并对选择的值提供有用的预览和属性。

日期和时间

09e72014dba8cfddc717708e3737fc3f.jpeg

图片网址

21b1dd35e87d1e574d787ce5b29ff461.jpeg

网站网址

8246596c34649c48668bc6905d877ff1.jpeg

JSON URL

148a69d04483a297dd02102ad34b14a0.jpeg

树状视图

这个也是用的最多的,树状图结构可以很清晰的展示,看一组图:

784bc452c4564b0b1f0c51f0d609c63d.png

同时支持对JSON数据中的数据进行搜索:

987394bbc9cd5c885ba0af04e2493f3e.gif

重点来了!

当你完成数据编辑或者审核后,需要分享给前端,不必复制全部数据,只需要生成指定链接即可,这个很方便。

ff46c92e5744b5902317710c6b7972a3.png

整体来讲,JSON Hero 支持多种试图查看JSON数据,同时支持VS Code 等扩展,相信对经常处理JSON的小伙伴来说,是一款很给力的工具。



欢迎加入我的知识星球,一起探讨架构,交流源码。加入方式,长按下方二维码噢

a18857da3d561be2f8e33e7546fcc1e9.png

已在知识星球更新源码解析如下:

eb753a119e9b84396bb616e4bc8b7d84.jpeg

7202685a83d2009e099b0e209f6444ae.jpeg

d0ba1c3d8a6e215c958486879bd765ae.jpeg

4ab8553f3c64008620f7bfad64be57e4.jpeg

最近更新《芋道 SpringBoot 2.X 入门》系列,已经 101 余篇,覆盖了 MyBatis、Redis、MongoDB、ES、分库分表、读写分离、SpringMVC、Webflux、权限、WebSocket、Dubbo、RabbitMQ、RocketMQ、Kafka、性能测试等等内容。

提供近 3W 行代码的 SpringBoot 示例,以及超 4W 行代码的电商微服务项目。

获取方式:点“在看”,关注公众号并回复 666 领取,更多内容陆续奉上。

文章有帮助的话,在看,转发吧。
谢谢支持哟 (*^__^*)
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值