推荐一款 JSON 可视化工具神器！_程序猿DD_的博客-CSDN博客

4e8631a766fc76632740ba8b988443a1.png

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

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

e376bdbb31d55813336b5ffd9290fa6f.png

项目地址：

https://github.com/jsonhero-io/jsonhero-web

安装

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

git clone https://github.com/jsonhero-io/jsonhero-web.gitcd jsonhero-webnpm install

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

npm start

使用

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

内容预览

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

日期和时间

62c9a6cbb6bd3b879372c2c265bfe3cb.png

图片网址

263d700042e51491e2e6fe5faea6930b.png

网站网址

1cd9cef8b5af0e2784f86f960fd1c495.png

JSON URL

93b04f7209ea58e754511554a4dcb50f.png

树状视图

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

d0c2e10b6c8477418708973574a9b4d9.png

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

a627573eaabb4c1d59799d72184ab7eb.gif

重点来了！

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

a597d6df00d2b8302144d624986955c2.png

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

我们创建了一个高质量的技术交流群，与优秀的人在一起，自己也会优秀起来，赶紧点击加群，享受一起成长的快乐。另外，如果你最近想跳槽的话，年前我花了2周时间收集了一波大厂面经，节后准备跳槽的可以点击这里领取！

推荐阅读

··································

你好，我是程序猿DD，10年开发老司机、阿里云MVP、腾讯云TVP、出过书创过业、国企4年互联网6年。从普通开发到架构师、再到合伙人。一路过来，给我最深的感受就是一定要不断学习并关注前沿。只要你能坚持下来，多思考、少抱怨、勤动手，就很容易实现弯道超车！所以，不要问我现在干什么是否来得及。如果你看好一个事情，一定是坚持了才能看到希望，而不是看到希望才去坚持。相信我，只要坚持下来，你一定比现在更好！如果你还没什么方向，可以先关注我，这里会经常分享一些前沿资讯，帮你积累弯道超车的资本。

点击领取2022最新10000T学习资料

原网址: 访问
创建于: 2022-07-11 10:53:35
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论