JSON Hero 由 API Hero 团队创建和维护。API Hero 可以轻松地集成到项目中，无需任何扩展。支持列视图、树视图、编辑器视图等多种预览方式，预览文件支持图片、视频、样式、网站等。
特征
-
以个人喜欢的任何方式查看 JSON：列视图、树视图、编辑器视图等。 -
自动推断字符串的内容并提供有用的预览 -
创建可用于验证 JSON 的推断 JSON 架构 -
快速扫描相关值以检查边缘情况 -
搜索 JSON 文件（键和值） -
可使用键盘 -
通过路径支持轻松共享 URL
本地运行
克隆 repo 并安装依赖项
git clone https://github.com/apihero-run/jsonhero-web.git
cd jsonhero-web
npm install
然后，在名为 repo 的根目录下创建一个文件 .env 并设置SESSION_SECRET值：
SESSION_SECRET=abc123
构建
npm run build
或
npm run dev
运行
npm start
访问：http://localhost:8787
效果展示
列视图
受 macOS Finder 的启发，Column View 是一种浏览 JSON 文档的新方法。支持键盘导航、路径栏、历史记录等功能。
另外，列视图支持 “持有” 选定的后代并在层次结构中向上移动，然后在兄弟姐妹之间移动并查看在该路径中找到的不同值。很难描述，但这里有一个动画可以帮助演示：
如图所示，在移动到父级时按住 Option（或 Alt ）可保持文档的一部分处于选中状态，并在其周围的 JSON 上下文中显示它。然后可以在数组中的项目之间遍历并比较跨深层层次结构的选择值。
编辑器视图
在编辑器中查看整个 JSON 文档，但保留在文档中移动时从侧边栏获得的实时预览和相关值：
树视图
使用传统的树视图遍历 JSON 文档，具有可折叠的部分和键盘快捷键。同时保持实时的预览效果：
搜索
快速打开搜索面板并在几毫秒内模糊搜索整个 JSON 文件。支持搜索：键名、键路径、值。
内容预览
JSON Hero 自动推断字符串的内容并提供有用的预览和您选择的值的属性。
日期和时间
图片网址
网站网址
推文网址
JSON 网址
颜色
相关值
轻松查看整个 JSON 文档中特定字段的所有相关值，包括任何 undefined 或 null 值。
传送门
开源协议：Apache2.0
开源地址：https://github.com/apihero-run/jsonhero-web
项目合集：https://github.com/RepositorySheet
-END-
原文始发于微信公众号（开源技术专栏）：一个开源的 JSON 浏览器，可快速浏览、搜索和导航 JSON 文件
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/166742.html
