牛逼！JSON 还能这么玩？

哈喽，大家好！我是前端实验室的小师妹!

今天给大家推荐一款优秀的JSON 可视化工具，没想到 JSON 还能这么玩啊！

现在有很多编辑器和在线工具支持 JSON 格式化，但是能直接可视化 JSON 数据的神器没几个了！

喜欢折腾的朋友可以尝试部署到本地或者自己服务器上玩一玩，当然也挺实用的。

JSON Hero

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

JSON Hero 可以让你快速浏览、搜索和导航你的 JSON 文件，在 Cloudflare Workers 上运行的混合 React 应用程序，用 Typescript 编写。

我挑了几项比较核心的功能，着重给大家介绍一下。

列视图

受 macOS 查找器的启发，列视图是一种浏览 JSON 文档的新方法。让你以一种更便捷的方式来查阅 JSON 数据。

而且还支持键盘快捷键导航、路径栏、访问历史等功能。

编辑器视图

工具将自动划分为左右两个面板，在编辑器中查看整个 JSON 文档，当你在左侧面板编辑 JSON 文件，便可以看到每项数据在右侧面板的详情展示，很直观的数据展示。

树视图

使用传统的树视图遍历 JSON 文档，你可以通过树状视图，快速遍历 JSON 文件中的每一项数据。

还可以通过键盘快捷键来操作控制。

搜索

这个功能就很强大了，支持对 JSON 文件中的数据进行搜索。快速打开搜索面板，并在几毫秒内模糊搜索整个 JSON 文件，能够快速检索出你想要看的内容，一个字，牛逼！

内容预览

这个功能也很强大，支持对日期与时间、图片网址、网站网址、推文网址、JSON网址、颜色等多种格式进行预览。

你可以通过下面网址直接体验：

https://jsonhero.io/

如果你想本地部署：

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

然后在项目根目录下创建一个文件.env,写入值SESSION_SECRET

SESSION_SECRET=abc123

然后运行

npm run build
npm run dev
npm start

打开网址http://localhost:8787就可以使用啦~

写在最后

欢迎加入前端实验室读者交流群，群里有不少技术大神，不定时会分享一些技术要点，更有一些资源收藏爱好者会分享一些优质的学习资料。吃瓜、摸鱼、白嫖技术就等你了~

进群方式：在下方公众号后台，回复 111 ，按提示操作即可进群。

如果该文章对你有帮助，那么就点击右下角的 [点赞]「在看」，给一个小小的鼓励吧~