實用！一款開源的 JSON 可視化管理工具
作者：小秋
這是一款很實用的 JSON 工具，可以更輕松直觀地查看 JSON 文檔。
簡介
JSON Hero 是一個簡單實用的 JSON 工具，通過簡介美觀的 UI 及增強的額外功能，使得閱讀和理解 JSON 文檔變得更容易、直觀。
- 支持多種視圖以便查看 JSON：列視圖、樹視圖、JSON 視圖等 列視圖是受 macOS Finder 啟發(fā)創(chuàng)建的一種瀏覽 JSON 文檔的新方法
- 自動推斷字符串的內(nèi)容并提供有用的預(yù)覽
- 自動推斷 JSON 的內(nèi)容、類型并提供有用的建議
- 快速掃描相關(guān)知識并檢查邊緣情況
- 支持檢索 JSON 文件00:14
- 支持使用鍵盤進行操控
- 可生成段路徑 URL 輕松與他人共享自己的 JSON 文件0:08
項目地址：
https://github.com/jsonhero-io/jsonhero-web
安裝使用
安裝
要在本地運行 JSON Hero，首先 clone 源代碼，并安裝相關(guān)依賴項：
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 用戶也提供了相關(guān)的擴展插件可直接安裝：https://www.raycast.com/maverickdotdev/open-in-json-hero
- 使用非官方 API：使用以下 JSON 發(fā)出 POST 請求：
{
"title": "test 123",
"content": { "foo": "bar" }
}將得到如下響應(yīng)：
{
"id": "YKKduNySH7Ub",
"title": "test 123",
"location": "https://jsonhero.io/j/YKKduNySH7Ub"
}內(nèi)容預(yù)覽
JSON Hero 會自動推斷字符串的內(nèi)容，并對選擇的值提供有用的預(yù)覽和屬性。
- 日期和時間
- 圖片網(wǎng)址
- 網(wǎng)站網(wǎng)址
- 推特網(wǎng)址
- JSON URL
- 顏色
相關(guān)值
可以輕松查看整個 JSON 文檔中特定字段的所有相關(guān)值，包括 undefined 和 null 值。
責任編輯：張燕妮
來源：
開源前哨
