簡(jiǎn)介

JSON Hero 是一個(gè)簡(jiǎn)單實(shí)用的 JSON 工具，通過(guò)簡(jiǎn)介美觀的 UI 及增強(qiáng)的額外功能，使得閱讀和理解 JSON 文檔變得更容易、直觀。

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

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

項(xiàng)目地址：

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

安裝使用

安裝

要在本地運(yùn)行 JSON Hero，首先 clone 源代碼，并安裝相關(guān)依賴項(xiàng)：

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

然后運(yùn)行以下命令啟動(dòng)，打開(kāi) http://localhost:8787 即可使用：

npm start

使用

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

• 前往 https://jsonhero.io/ 并將 JSON 文件拖拽到網(wǎng)站上，或在提供的表單中粘貼 JSON 或 JSON url
• 使用包含 JSON 有效負(fù)載的 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 擴(kuò)展并從 VS Code 打開(kāi) JSON
• Raycast 用戶也提供了相關(guān)的擴(kuò)展插件可直接安裝：https://www.raycast.com/maverickdotdev/open-in-json-hero
• 使用非官方 API：使用以下 JSON 發(fā)出 POST 請(qǐng)求：

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

將得到如下響應(yīng)：

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

內(nèi)容預(yù)覽

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

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

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

• 推特網(wǎng)址

• JSON URL

• 顏色

相關(guān)值

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