8K star！功能强大的开源JSON可视神器
上次给大家推荐过一款JSON可视化的工具，评论区好多同学反馈有性能问题，JSON大一些就会挂。所以今天我们再推荐一款可视化的JSON调试工具，让你您快速浏览、搜索 JSON 文件，目前在GitHub有 8K Star，它就是：jsonhero
jsonhero是什么?
首先这一期的产生要感谢热心同学的留言，他们给出了线索，并且还一直督促我完成，所以大家还有什么其他感兴趣的话题，也可以留言，我会逐步去实现。
jsonhero 是一款开源的JSON调试工具，它将自己称为JSON的浏览器。它提供干净、美观且包含额外功能的 UI，让您轻松阅读和理解 JSON 文件。
我先来带大家大致了解一下它的功能，方便对项目有一个整体的印象。在文末我还对比了jsonhero和jsoncrack，希望给大家一些参考价值。
首先我们要导入一个JSON，我就直接贴一下数据过去，就可以开始使用了。
查看 JSON
查看JSON是主打的功能，提供了列数图，编辑视图和树视图。列视图是本产品的主打，作者是受 macOS Finder 的启发，采用了这种分列的浏览视图。
列视图
编辑器视图
在编辑器中查看整个 JSON 文档，但在浏览文档时保留从侧边栏获得的精美预览和相关值：
树视图
使用传统的树视图通过可折叠部分和键盘快捷键来遍历 JSON 文档。同时保留漂亮的预览：
快捷功能
jsonhero包含了快捷功能：键盘导航、路径栏、历史记录。基本的操作做了很好的键盘映射，操作起来挺舒服的。
这里有一个快捷操作，在移动到父级时按住Option会保持文档的部分处于选中状态，并在右侧的JSON 上下文中显示它。然后，您可以在数组中的同级节点之间进行遍历，并比较深层层次结构变化中的选择值。
搜索
打开搜索面板，可以模糊搜索整个 JSON 文件。可以按key、path、value等内容搜索。
内容预览
这是jsonhero的一个重点功能。JSON Hero 会自动推断字符串的内容，并提供您所选值的有用预览和属性。以下是几种比较有特点的预览现实。
日期和时间
图片URL
网站URL
JSON URL
颜色
相关值
轻松查看整个 JSON 文档中特定字段的所有相关值，包括任何undefined或null值。
分享
json hero还可以通过链接快速分享
VS code插件
jsonhero的vscode插件有点扯，就是帮你把IDE里的json发到web里打开。是我的Ctrl+C坏了吗？
还可以直接生成 JSON Schema
下面是它的GitHub star历史，jsonhero 的发展时间也是不到2年，从star数来看，没有jsoncrack上升的快。
部署 jsonhero
SAAS
另外项目有在线的SaaS，体验下功能可以直接使用，地址如下：
直接就可以试用，无需注册/登录，而且还很贴心的准备了示例的JSON。
源码运行
整个项目依赖Nodejs，所以你需要先准备Nodejs的环境，之后就可以拉去代码和构建了：
bash
git clone <https://github.com/triggerdotdev/jsonhero-web.git>
cd jsonhero-web
npm install需要在项目根目录中创建一个.nev文件，然后在里面设置SESSION_SECRET的值：
ini
SESSION_SECRET=abc123接下来就是编译和运行了
bash
#编译
npm run dev
#启动
npm start启动后，访问 http://localhost:8787，就可以访问到jsonhero的服务了。
jsonhero VS jsoncrack
刚好前段时间刚刚介绍过jsoncrack，我们就来对比下，方便大家挑选使用。这个对比相对主观，仅供参考。
当然还有一点要考虑到的内容就是项目的发展，从目前来看**jsoncrack比jsonhero，**要更好一些。因此呢，如果jsoncrack 能够改进性能上的一些问题，并且发展速度保持住，那么未来会更加值得期待。
项目信息
- 项目名称：jsonhero
- GitHub 链接：github.com/triggerdotd...
- Star 数：8K+