【導(dǎo)語】：這是一款很實(shí)用的 JSON 工具，可以更輕松直觀地查看 JSON 文檔。

簡介

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

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

  

• 自動推斷字符串的內(nèi)容并提供有用的預(yù)覽

• 自動推斷 JSON 的內(nèi)容、類型并提供有用的建議

• 快速掃描相關(guān)知識并檢查邊緣情況

• 支持檢索 JSON 文件

• 支持使用鍵盤進(jìn)行操控

• 可生成段路徑 URL 輕松與他人共享自己的 JSON 文件

項(xiàng)目地址：

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

安裝使用

安裝

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

gitclonehttps://github.com/jsonhero-io/jsonhero-web.git
cdjsonhero-web
npminstall

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

npmstart

使用

可以通過多種方式將 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 打開 JSON
• Raycast 用戶也提供了相關(guān)的擴(kuò)展插件可直接安裝：https://www.raycast.com/maverickdotdev/open-in-json-hero
• 使用非官方 API：使用以下 JSON 發(fā)出 POST 請求：

{
"title":"test123",
"content":{"foo":"bar"}
}

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

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

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

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

• 日期和時(shí)間

  

• 圖片網(wǎng)址

  

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

  

• 推特網(wǎng)址

  

• JSON URL

  

• 顏色

  

相關(guān)值

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