簡介

JSON Hero 是一個簡單實用的 JSON 工具，通過簡介美觀的 UI 及增強的額外功能，使得閱讀和理解 JSON 文檔變得更容易、直觀。

• 支持多種視圖以便查看 JSON：列視圖、樹視圖、JSON 視圖等 列視圖是受 macOS Finder 啟發(fā)創(chuàng)建的一種瀏覽 JSON 文檔的新方法

• 自動推斷字符串的內(nèi)容并提供有用的預覽
• 自動推斷 JSON 的內(nèi)容、類型并提供有用的建議
• 快速掃描相關知識并檢查邊緣情況
• 支持檢索 JSON 文件00:14
• 支持使用鍵盤進行操控
• 可生成段路徑 URL 輕松與他人共享自己的 JSON 文件0:08

項目地址：

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

安裝使用

安裝

要在本地運行 JSON Hero，首先 clone 源代碼，并安裝相關依賴項：

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

然后運行以下命令啟動，打開 http://localhost:8787 即可使用：

npm start

使用

可以通過多種方式將 JSON 文件發(fā)給 JSON Hero 解析

• 前往 https://jsonhero.io/ 并將 JSON 文件拖拽到網(wǎng)站上，或在提供的表單中粘貼 JSON 或 JSON url
• 使用包含 JSON 有效負載的 Base64 字符串，拼接到 jsonhero.id：jsonhero.io/new?j=eyAiZm9vIjogImJhciIgfQ==
• 使用包含 JSON 文件的 url 地址，拼接到 jsonhero.io：jsonhero.io/new?url=https://jsonplaceholder.typicode.com/todos/1
• 安裝 JSON Hero 的 VS Code 擴展并從 VS Code 打開 JSON
• Raycast 用戶也提供了相關的擴展插件可直接安裝：https://www.raycast.com/maverickdotdev/open-in-json-hero
• 使用非官方 API：使用以下 JSON 發(fā)出 POST 請求：

{
  "title": "test 123",
  "content": { "foo": "bar" }
}

將得到如下響應：

{
  "id": "YKKduNySH7Ub",
  "title": "test 123",
  "location": "https://jsonhero.io/j/YKKduNySH7Ub"
}

內(nèi)容預覽

JSON Hero 會自動推斷字符串的內(nèi)容，并對選擇的值提供有用的預覽和屬性。

• 日期和時間
  
• 圖片網(wǎng)址

• 網(wǎng)站網(wǎng)址

• 推特網(wǎng)址

• JSON URL

• 顏色

相關值

可以輕松查看整個 JSON 文檔中特定字段的所有相關值，包括 undefined 和 null 值。