實用!一款開源的 JSON 視覺化管理工具
簡介
JSON Hero 是一個簡單實用的 JSON 工具,通過簡介美觀的 UI 及增強的額外功能,使得閱讀和理解 JSON 文件變得更容易、直觀。
-
支援多種檢視以便檢視 JSON:列檢視、樹檢視、JSON 檢視等 列檢視是受 macOS Finder 啟發建立的一種瀏覽 JSON 文件的新方法
-
自動推斷字串的內容並提供有用的預覽
-
自動推斷 JSON 的內容、型別並提供有用的建議
-
快速掃描相關知識並檢查邊緣情況
-
,時長 00:10
-
支援檢索 JSON 檔案
-
,時長 00:14
-
支援使用鍵盤進行操控
-
可生成段路徑 URL 輕鬆與他人共享自己的 JSON 檔案
-
,時長 00: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 檔案發給 JSON Hero 解析
- 前往 https://jsonhero.io/ 並將 JSON 檔案拖拽到網站上,或在提供的表單中貼上 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 發出 POST 請求:
{ "title": "test 123", "content": { "foo": "bar" } }
將得到如下響應:
{ "id": "YKKduNySH7Ub", "title": "test 123", "location": "https://jsonhero.io/j/YKKduNySH7Ub" }
內容預覽
JSON Hero 會自動推斷字串的內容,並對選擇的值提供有用的預覽和屬性。
-
日期和時間
-
圖片網址
-
網站網址
-
推特網址
-
JSON URL
-
顏色
相關值
可以輕鬆檢視整個 JSON 文件中特定欄位的所有相關值,包括 undefined 和 null 值。
「其他文章」
- Web1.0到Web3.0,網際網路是如何演進的?
- DDD概念複雜難懂,實際落地如何設計程式碼實現模型?
- 學會一招!如何利用 pandas 批量合併 Excel?
- 超硬核!11個非常實用的 Python 和 Shell 拿來就用指令碼例項!
- 還在用requests寫爬蟲嗎?這個庫效率提高一倍!
- 分散式程式設計工具Akka Streams、Kafka Streams和Spark Streaming大PK
- 工具類如何獲取到 Spring 容器中的 Bean?
- code-review之前端程式碼優化彙總
- 七個讓我們成為更好 Vue 開發者的技巧
- 效率寶典:10個超實用的React Hooks庫
- 如何將HTML與Htmx一起使用並減少JavaScript程式碼量
- 一個依賴搞定Spring Boot 配置檔案脫敏
- 如何在 Python 中使用 DateTime
- 如何利用OpenTelemetry識別資料庫依賴關係?
- Node.js 子執行緒Crash 問題的排查
- 如何在Python中操作MySQL?
- 非同步非阻塞框架是如何實現的?
- 從 CPU 說起,深入理解 Java 記憶體模型!
- JavaScript逆向案例:破解登入密碼
- 如何從FreeBSD 12升級到FreeBSD13