← 全部文章
更新於 May 29, 20266 min read

JSON 樹狀檢視器:以可摺疊樹瀏覽 JSON

把 JSON 當作互動式可摺疊樹來檢視。展開或摺疊任意物件或陣列,瀏覽大型巢狀負載 —— 在瀏覽器中完成,不需上傳。

一份 5000 行的 API 回應當成純文字根本讀不下去。一個 可摺疊的 JSON 樹 能把那堵括號牆變成可一枝枝展開、一枝枝摺疊的互動結構 —— 不用滾過其他東西就能找到你關心的欄位。本指南說明 JSON tree viewer 是什麼、為什麼對大型或深巢狀資料比純文字好，以及什麼時候該用樹而不是 formatter 或 validator。

什麼是可摺疊的 JSON 樹？

JSON tree viewer 解析你的 JSON，並把它渲染成可展開節點的階層，而不是扁平的一大塊文字。每一個物件 {} 和陣列 [] 都成為一個節點，可以摺成一行，也可以展開露出子節點。這是 閱讀 JSON 與 瀏覽 JSON 的差別。

// 摺疊狀態 —— 一眼看見形狀
{
  "user": {…},        ▶ 6 keys
  "orders": […],      ▶ 24 items
  "meta": {…}         ▶ 3 keys
}

點一個節點它展開；再點一下它就摺回一行摘要，通常還會附上隱藏的 key 或元素數量。資料本身從未改變 —— 改變的只是你在看其中多少。

為什麼樹比一堵文字牆好

格式化（pretty-print）讓 JSON 可讀，但大型已格式化的文件仍是上千行得滾過去。樹再多加了 你能控制的結構：

  • 深巢狀資料 —— 設定檔、Kubernetes manifest 與 GraphQL 回應巢狀很多層。把你不關心的枝摺起來，相關段落就浮上來。
  • 大型 API 回應 —— 把 500 元素的陣列摺成一行，只展開你正在除錯的那個元素。
  • 陌生的 payload —— 一切摺到頂層，能在寫下任何一行解析程式碼前先即時拿到這個 API 的形狀地圖。
  • 比對結構 —— 摺起的節點讓你一眼看出兩個 payload 共有哪些段。

展開、摺疊與瀏覽

一個好的 JSON tree viewer 給你的不止「點擊切換」：

  • 逐節點展開／摺疊 —— 只打開你在查的那一枝。
  • 全摺疊／全展開 —— 一次重置視圖，而不是一個一個關。
  • 元素與 key 數量 —— 摺疊節點顯示 ▶ 24 items 或 ▶ 6 keys，讓你不會迷路。
  • 語法高亮 —— key、字串、數字、布林與 null 各有不同顏色，型別一眼可辨。
  • key 導覽 —— 不用滾過幾千行就能跳到某個欄位。

依路徑查詢：JSONPath 與 JMESPath

樹一打開，下一個問題通常是 「這個 key 在哪？」。兩種小型查詢語言讓你用路徑而不是點擊來定位值：

  • JSONPath —— 受 XPath 啟發，標準化為 RFC 9535。 $.user.orders[*].id 讀作「user.orders 裡每一個 id」。支援萬用字元、切片、過濾（?(@.price > 10)）以及遞迴下降（..price）。
  • JMESPath —— AWS CLI 的 --query 與很多雲端工具都用它。表面相近，但有一等的投影與函式： users[?active].name。

tree viewer 是用來探索；JSONPath／JMESPath 是用來可重複擷取。搭配用：先用樹 找出 路徑，再記成 JSONPath 運算式用在腳本或 jq 裡。

Tree viewer vs Formatter vs Validator —— 什麼時候用哪一個

你想……用
瀏覽並探索大型或巢狀的 JSONTree viewer
取得乾淨、有縮排、可複製或可提交的文字Formatter / pretty-printer
確認 JSON 語法合法並找出錯誤Validator
看兩份文件之間改了什麼Diff 工具

這些會重疊 —— 多數現代工具既格式化 也 渲染樹 —— 但決定該用哪個的關鍵問題是：你需要 可複製的輸出（formatter）還是 可探索的結構（viewer）。完整對比見 JSON Viewer vs JSON Formatter。

檢視前先處理壞 JSON

tree viewer 需要合法 JSON 才能建樹 —— 它無法渲染解析不了的結構。如果你的輸入有尾隨逗號、單引號或不加引號的 key（手動編輯設定或 LLM 輸出常見），先修。一個好 viewer 會在渲染前自動修復常見錯誤；否則就用 JSON Fix 清理，或用 validator 查精確錯誤。底層規則見 什麼是 JSON？

常見問題

什麼是可摺疊的 JSON 樹？

一個把 JSON 渲染成可展開節點階層而不是扁平文字的檢視。每個物件與陣列都能摺成一行摘要，也能展開露出子節點，讓你能在大型文件中瀏覽而不需滾過全部。

JSON tree viewer 與 formatter 有何不同？

formatter 輸出乾淨、有縮排的 文字 讓你複製；tree viewer 渲染一個可點擊穿越的互動 結構。要輸出用 formatter，要探索用 viewer。見 完整對比。

我可以一個一個摺疊或展開節點嗎？

可以 —— 點任何物件或陣列即可切換，也可用「collapse all」／「expand all」一次重置整個視圖。摺疊節點會顯示隱藏 key 或元素的數量。

如果我的 JSON 非法怎麼辦？

樹只能由可解析的 JSON 建起。先用 JSON Fix 修常見錯誤，或用 JSON validator 找出精確問題，再檢視清理過的結果。

把你的 JSON 當成樹來探索

把任何 JSON 貼到 fixjson 的 JSON Viewer，它會即時渲染一棵可摺疊的樹 —— 任意節點都能展開／摺疊，能看到元素計數，可在大型巢狀 payload 中瀏覽。它會在渲染前修復壞 JSON，所有作業都在你的瀏覽器中，不會上傳任何內容。