开源JSON可视神器，让阅读JSON变得简单!-JSONHero

众所周知，现在有不少代码编辑器以及在线工具，都支持 JSON 格式化，因此这一特性，已经不能称的上是亮点。调试工具已经成为每个开发者不可或缺的“利器”。但是，你见过能直接可视化 JSON 数据，把整个 JSON 文件，从头到尾给你翻新一下，在你面前呈现出一整个 JSON 数据可视化的场景么？它们帮助我们高效地定位问题、优化代码，并提升整体的开发体验。如果没有，那你应该好好看看 JSON Hero 这个开源项目。本文将详细介绍这款前端调试工具，包括开发者工具、代码编辑器、移动端调试、远程调试、抓包&代理、Mock数据、接口调试、构建分析、性能测试、JSON查看、在线代码编辑器以及点击元素跳转代码等工具。

JSON Hero是什么?

JSON Hero 是一个简单实用的 JSON 工具，通过简介美观的 UI 及增强的额外功能，使得阅读和理解 JSON 文档变得更容易、直观。支持多种视图以便查看 JSON：列视图、树视图、JSON 视图等 列视图是受 macOS Finder 启发创建的一种浏览 JSON 文档的新方法。

JSON Hero主要功能

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

JSON Hero 支持 JSON 数据的语法高亮，使数据更具可读性。

自动推断字符串的内容并提供有用的预览

自动推断 JSON 的内容、类型并提供有用的建议

快速扫描相关知识并检查边缘情况

支持检索 JSON 文件

支持使用键盘进行操控

可生成段路径 URL 轻松与他人共享自己的 JSON 文件

JSON Hero应用特色

优势

列视图

该特性灵感来源于 macOS Finder 文件夹的展示方式，让你以一种更便捷的方式来查阅 JSON 数据。

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

编辑器视图

进入该视图模式时，工具将自动划分为左右两个面板。

当你在左侧面板编辑 JSON 文件，便可以看到，每项数据在右侧面板的详情展示，非常直观！

树状视图

像 JSON 这种具备完整层级结构的数据文件，通过树状视图来查阅文件，可以说再适合不过了。

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

搜索

有趣的是，JSON Hero 还支持对 JSON 文件中的数据进行搜索。

结合具体的数据格式 + 数据包含内容，便能快速检索出你想看的内容，甚至你还能指定数据检索日期。‍

JSON Hero安装

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

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

cd jsonhero-web

npm install

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

npm start

总结

JSONHero以其便捷性和实用性赢得了用户的青睐。无论你是开发者还是数据爱好者，都能在这个平台上找到处理JSON数据的新方式。现在就访问JSONHero，开始你的JSON数据探索之旅吧！

开源地址:https://github.com/triggerdotdev/jsonhero-web