众所周知，现在有不少代码编辑器以及在线工具，都支持 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 URL、颜色等多种格式进行预览。

不仅于此，你还能在预览的时候，在预览面板中，逐个查看每一项数据的具体内容。

数据共享

当你完成 JSON 文件的编辑之后，你还可以生成一个指定链接，将该 JSON 文件共享给团队成员或其它开发者。

除此之外，该项目还具备其它非常实用的功能，比如黑暗模式切换、键盘快捷键、VS Code 扩展等等。感兴趣的同学，可以使用一下。

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