[JS/TS] JSON数据查看与调试工具JSON Hero使用指南

JSON Hero 是一款基于 Web 的 JSON 数据可视化工具，它通过简洁美观的用户界面和实用的增强功能，使得阅读、理解和调试 JSON 文档变得更为直观和高效。无论是开发过程中查看 API 响应，还是分析复杂的数据结构，它都能提供出色的体验。

它支持多种视图模式来查看 JSON 数据，例如列视图、树视图和原始 JSON 视图。其中，列视图的设计灵感来源于 macOS 的 Finder，提供了一种新颖的浏览 JSON 文档的方式。

本地安装

如果你想在本地运行 JSON Hero，可以克隆其源代码仓库并进行部署。首先，使用 Git 克隆项目：

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

依赖安装完成后，运行启动命令，然后在浏览器中访问 http://localhost:8787 即可使用：

npm start

直接使用

更快捷的方式是直接访问其官方在线版本：https://jsonhero.io/ 。你可以将本地的 JSON 文件拖拽到网页上，或者直接在提供的输入框中粘贴 JSON 字符串或一个指向 JSON 数据的 URL。

内容智能预览

JSON Hero 的强大之处在于它能自动推断字符串字段的内容，并为选中的值提供有用的预览和附加属性，这大大提升了数据审查的效率。

日期和时间

对于日期时间格式的字符串，工具会提供直观的日历视图和多种时间格式转换。

图片网址

当字段值是一个图片 URL 时，JSON Hero 会直接在右侧预览区域加载并显示该图片。

网站网址

如果字段包含的是网站链接（如 GitHub 仓库地址），工具会提取并展示站点的关键信息，如仓库名称、描述、星标数等。

JSON URL

它甚至能处理指向其他 JSON 数据的 URL，并允许你直接在该界面中展开和浏览嵌套的数据结构。

树状视图

树状视图是最常用的一种展示方式，它能清晰地呈现 JSON 数据的层级结构。以下图为例，一个包含产品目录的复杂 JSON 对象被清晰地分解展示。

同时，工具支持对 JSON 内部的所有数据进行全文搜索，即使数据嵌套很深，也能快速定位。

分享功能是其一大亮点。当你完成对某份 JSON 数据的查看或编辑后，无需复制庞大的数据体，只需要生成一个唯一的分享链接，就可以将当前的数据状态发送给同事或前端开发者，非常方便。

总而言之，JSON Hero 通过多视图支持和智能预览等特性，显著提升了处理 JSON 数据的效率。对于经常需要与 JSON 打交道的开发者、数据分析师或测试人员而言，这无疑是一款值得尝试的开源实战工具。此外，它还提供了 VS Code 等编辑器的扩展插件，可以无缝集成到你的开发工作流中。

项目地址

JSON Hero 是一个完全开源的项目，你可以在 GitHub 上找到它的所有源代码，并参与贡献：

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

如果你在寻找更多提升开发效率的工具或想与其他开发者交流心得，欢迎来 云栈社区 逛逛，这里汇集了丰富的技术资源和活跃的讨论氛围。