如果你的 JSON 文檔嵌套很深的話，那么你不得不手動(dòng)折疊層次結(jié)構(gòu)的一部分去關(guān)注你關(guān)心的 JSON 子集。

MacOS 的 Finder 通過(guò)提供方便的列視圖解決了其中一些問(wèn)題，如下圖所示：

如果我們將這些相同的原則應(yīng)用于 JSON 文檔，它可能看起來(lái)像這樣：

它具有你期望的所有功能：鍵盤(pán)導(dǎo)航、路徑欄、歷史記錄。它還有一個(gè)優(yōu)秀的功能，允許你保持選定的后代并在層級(jí)結(jié)構(gòu)中向上移動(dòng)，然后同級(jí)之間移動(dòng)并查看在該路徑中找到的不同值，描述起來(lái)可能有點(diǎn)抽象，我們可以通過(guò)下面的動(dòng)畫(huà)來(lái)演示：

智能預(yù)覽面板

我們構(gòu)建了一個(gè)預(yù)覽面板，顯示有關(guān)當(dāng)前選擇的更多信息。它可以自動(dòng)推斷所選項(xiàng)目的內(nèi)容，并為你提供日期和時(shí)間、網(wǎng)站、推文、youtube 視頻、顏色等的智能預(yù)覽：

關(guān)聯(lián)值

可以輕松查看整個(gè) JSON 文檔中特定字段的所有相關(guān)值，包括任何未定義的或空值：

搜索

要想查找特定的數(shù)據(jù)，可以使用 CMD+K 快捷鍵快速調(diào)出模糊搜索的面板，可以搜索對(duì)象鍵、路徑、值，甚至格式化值，例如搜索Dec可以找到2021-12-01T13:56:12Z。

經(jīng)典視圖

列表視圖可能不適合所有的場(chǎng)景，所以 JSON Hero 也提供一個(gè)經(jīng)典的 JSON 樹(shù)視圖模式。

我們從頭開(kāi)始構(gòu)建了這個(gè)樹(shù)視圖模式，以便快速并擴(kuò)展到大型文檔，利用出色的 react-virtual 項(xiàng)目來(lái)確保平滑滾動(dòng)，它也是一個(gè)符合 ARIA 的樹(shù)形視圖，并具有你期望快速遍歷和折疊/展開(kāi)內(nèi)容的所有快捷鍵。

我們還包括一個(gè)由 CodeMirror 6 驅(qū)動(dòng)的編輯器，當(dāng)你在文檔中移動(dòng)時(shí)，它會(huì)保留你從側(cè)邊欄中獲得的預(yù)覽和相關(guān)值：

自動(dòng)推斷的 JSON Schema

可以使用我們的自動(dòng)推斷模式生成器(由 @jsonhero/schema-infer 提供支持)從你的 JSON 中創(chuàng)建 JSON 模式文檔：

分享

輕松共享指向你的 JSON 文檔的鏈接，甚至鏈接到文檔的特定部分。

重要提示：任何擁有你 JSON 文檔的 URL 的人都可以查看它，并且所有 JSON Hero 都是公開(kāi)的。如果你使用的是 jsonhero.io，則你的數(shù)據(jù)存儲(chǔ)在 Cloudflare KV 中。

插件

現(xiàn)在 JSON Hero 也支持在 VSCode 中使用，直接安裝官方提供的插件 https://marketplace.visualstudio.com/items?itemName=JSONHero.jsonhero-vscode 即可。

文檔鏈接：https://github.com/jsonhero-io/jsonhero-web。