經常使用Swagger的小夥伴應該有所體會，Swagger對於JSON的支援真的很不友好！最近發現了兩款顏值很不錯的JSON視覺化工具，可以優雅地展示JSON資料從而提高開發效率，推薦給大家！
SpringBoot實戰電商專案mall（50k+star）地址：https://github.com/macrozheng/mall
聊聊Swagger
我們先來聊聊Swagger對JSON支援有哪些不友好的地方，我們為什麼需要JSON視覺化工具！
- 當我們使用Swagger提交POST請求，輸入JSON請求引數時，它既不支援JSON格式校驗，也不支援格式化，用起來很不方便；
- 當我們使用Swagger獲取到的JSON資料比較長時，Swagger不支援摺疊資料，有時候我們只能把資料複製到其他工具裡去檢視，比如找個線上JSON解析工具。
- 針對上面兩個Swagger的使用痛點，使用
JsonHero和JsonVisio都可以解決，而且它們都是比較有特色的JSON視覺化工具。
JsonHero
簡介
JsonHero是一款開源的JSON視覺化工具，目前在Github已有2.9K+Star，通過JsonHero可以非常方便地檢視JSON資料，它支援列檢視、樹檢視和編輯檢視，總有一款適合你！
安裝
- JsonHero是個前端專案，下載安裝還是非常簡單的，首先下載它的安裝包，下載地址：https://github.com/jsonhero-i...
- 下載完成後解壓到指定目錄，在根目錄下建立
.env檔案，檔案內容如下；
SESSION_SECRET=abc123- 然後使用如下命令安裝依賴並啟動，使用前需先安裝
node.js環境；
npm install
npm start- 啟動成功後控制檯將顯示如下資訊；
- 接下來就可以使用JsonHero來視覺化JSON資料了，訪問地址：http://localhost:8787
使用
- JsonHero的使用非常簡單，直接把JSON資料或者獲取JSON的URL複製到輸入框，然後點選
Go按鈕即可；
- 我們可以把Swagger中獲取到的長JSON資料複製過來，通過
列檢視我們可以層層深入地檢視JSON資料；
- 當我們選中某個JSON物件時，右側會直接顯示該JSON物件的資料；
- 通過
JSON檢視我們可以檢視格式化好的JSON資料，同樣選中某個JSON物件時，右側會直接顯示該JSON物件的資料；
- 通過
樹檢視可以對JSON資料進行摺疊，可以更加方便地檢視資料；
- 我們還可以通過搜尋功能，對JSON資料進行全域性搜尋；
- JsonHero還支援對不同格式的資料進行預覽，比如圖片、時間、日期、網址等資料。
JsonVisio
簡介
JsonVisio是一款簡潔易用的JSON視覺化工具，目前在Github已有4.1K+Star，可以支援JSON格式化、編輯和校驗，並且能根據JSON生成樹狀圖。
安裝
- 首先我們需要下載JsonVisio的安裝包，注意下載
1.6.0版本，下載地址：https://github.com/AykutSarac...
- 下載成功後解壓到指定目錄，然後使用
npm命令進行安裝和啟動；
npm install
npm run dev- 啟動成功後控制檯將輸出如下資訊；
- 接下來就可以訪問JsonVisio的頁面了，點選
Start Generating開始使用JSON編輯器，訪問地址：http://localhost:3000
使用
- 把我們需要在Swagger中編輯的請求引數給拷貝過來，JsonVisio可以支援編輯、格式化、清空和儲存等操作；
- 當我們的JSON格式出錯時，會給出提示；
- 還可以支援根據JSON格式生成樹狀圖。
總結
通過使用上面兩種JSON視覺化工具，就算只使用Swagger來除錯介面也不愁了！細心的小夥伴應該可以發現，JsonHero只支援檢視JSON，並不支援編輯，所以編輯JSON還得使用JsonVisio。不過專案作者在Issues裡面回覆到，以後版本會進行支援。
專案地址
- JsonHero：https://github.com/jsonhero-i...
- JsonVisio：https://github.com/AykutSarac...