牛逼！JSON 还能这么玩？

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

上周连上七天班，今天周二了，小师妹还迷迷糊糊的。

一周上七天班哪有不发疯的哈哈哈哈哈哈...

打工仔的无奈，继续上(mo)班(yu)吧！

今天给大家推荐一款优秀的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就可以使用啦~