JSON Hero: 一款强大的 JSON 可视化管理工具
JSON Hero 是一个开源的、漂亮的 JSON 查看器,可让你快速浏览、搜索和导航你的 JSON 文件,在 Cloudflare Workers 上运行的混合 React 应用程序,用 Typescript 编写。
如果你的 JSON 文档嵌套很深的话,那么你不得不手动折叠层次结构的一部分去关注你关心的 JSON 子集。
MacOS 的 Finder 通过提供方便的列视图解决了其中一些问题,如下图所示:
如果我们将这些相同的原则应用于 JSON 文档,它可能看起来像这样:
它具有你期望的所有功能:键盘导航、路径栏、历史记录。它还有一个优秀的功能,允许你保持选定的后代并在层级结构中向上移动,然后同级之间移动并查看在该路径中找到的不同值,描述起来可能有点抽象,我们可以通过下面的动画来演示:
智能预览面板
我们构建了一个预览面板,显示有关当前选择的更多信息。它可以自动推断所选项目的内容,并为你提供日期和时间、网站、推文、youtube 视频、颜色等的智能预览:
关联值
可以轻松查看整个 JSON 文档中特定字段的所有相关值,包括任何未定义的或空值:
搜索
要想查找特定的数据,可以使用 CMD+K
快捷键快速调出模糊搜索的面板,可以搜索对象键、路径、值,甚至格式化值,例如搜索Dec可以找到2021-12-01T13:56:12Z。
经典视图
列表视图可能不适合所有的场景,所以 JSON Hero 也提供一个经典的 JSON 树视图模式。
我们从头开始构建了这个树视图模式,以便快速并扩展到大型文档,利用出色的 react-virtual
项目来确保平滑滚动,它也是一个符合 ARIA 的树形视图,并具有你期望快速遍历和折叠/展开内容的所有快捷键。
我们还包括一个由 CodeMirror 6
驱动的编辑器,当你在文档中移动时,它会保留你从侧边栏中获得的预览和相关值:
自动推断的 JSON Schema
可以使用我们的自动推断模式生成器(由 @jsonhero/schema-infer
提供支持)从你的 JSON 中创建 JSON 模式文档:
分享
轻松共享指向你的 JSON 文档的链接,甚至链接到文档的特定部分。
重要提示:任何拥有你 JSON 文档的 URL 的人都可以查看它,并且所有 JSON Hero 都是公开的。如果你使用的是 jsonhero.io,则你的数据存储在 Cloudflare KV 中。
插件
现在 JSON Hero 也支持在 VSCode 中使用,直接安装官方提供的插件 https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode 即可。
文档链接:https://github.com/jsonhero-io/jsonhero-web
本文转载自:「Github爱好者」,原文:https://url.hi-linux.com/EKUnH,版权归原作者所有。