JSON Hero: 一款强大的 JSON 可视化管理工具

公众号关注 「奇妙的 Linux 世界」

设为「星标」，每天带你玩转 Linux ！

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，版权归原作者所有。欢迎投稿，投稿邮箱: [email protected]。

最近，我们建立了一个技术交流微信群。目前群里已加入了不少行业内的大神，有兴趣的同学可以加入和我们一起交流技术，在 「奇妙的 Linux 世界」 公众号直接回复 「加群」 邀请你入群。

你可能还喜欢

点击下方图片即可阅读

云原生日志管理瑞士军刀 Fluent Operator 中文入门教程


点击上方图片，『美团|饿了么』外卖红包天天免费领

更多有趣的互联网新鲜事，关注「奇妙的互联网」视频号全了解！