這個工具的用途
JSON Tree Viewer 將 JSON 文件轉為可瀏覽的樹狀檢視——展開或收合巢狀物件與陣列、依鍵或值搜尋、一鍵複製某個節點的 JSONPath、預覽豐富內容（可點按的 URL、圖片縮圖、人類可讀的日期、顏色色塊）。所有運算都在你的瀏覽器內完成——資料不會上傳。
使用步驟
貼上 JSON（或載入範例），右側面板會填入樹狀檢視。點擊箭頭可展開；工具列可一次展開或收合全部。將滑鼠移到某一列上可顯示 Copy value、Copy JSONPath，以及（針對物件/陣列的）Copy subtree 按鈕。
輸入： {"repo":"devsmiths/web","stars":1280,"homepage":"https://dev-smiths.org","createdAt":"2024-03-11T08:24:00Z","themeColor":"#3B82F6","avatar":"https://avatars.githubusercontent.com/u/9919?s=80","topics":["json","developer-tools","cloudflare"],"owner":{"login":"ada","admin":true}}
你可以做的事：
homepage欄位看起來像 URL，會變成可點擊的連結（在新分頁開啟）。createdAt欄位會以人類可讀格式顯示（例如 2024/3/11 上午 8:24:00），同時在括號中保留原始 ISO 字串。themeColor欄位會在#3B82F6旁顯示一個小色塊。- 展開
owner，點擊login旁的複製路徑圖示，會將$.owner.login複製到剪貼簿。 - 在工具列搜尋
topic，只會把topics分支標示出來。
在輸出面板上方切換 Tree 與 Raw，可比對可瀏覽的樹狀檢視與底層原始碼。
限制與邊界情況
- 檢視器僅渲染格式正確的 JSON。若輸入有誤，請先用 Validator，或直接到 Repair 把 JSON5 / JSONC / 類 Python 資料轉為標準 JSON。
- 若有超大單一陣列（> 5,000 個元素），目前每列都會渲染；真正的視窗化（windowed list）在後續版本提供。先收合大型陣列以保持效能。
- URL 連結以
rel="noreferrer noopener"在新分頁開啟——頁面本身不會發出請求，也不會送出任何分析資料。 - 在樹中直接編輯（Form 檢視）為 roadmap 項目；目前樹是唯讀的。
- 關於底層查詢語言，請參閱 JSONPath 解說； 若文件超大，請參閱 處理大型 JSON 檔案。
常見問題
- 如何複製某個值的 JSONPath？
- 將滑鼠移到列上（或以鍵盤聚焦），點擊值旁邊的連結圖示即可。路徑會以標準 JSONPath 形式寫出，例如 $.owner.login 或 $.users[0].name。非簡單識別字的鍵會用方括號逸出：$["key with spaces"]。
- 為什麼長字串會被截斷並出現「展開」按鈕？
- 超過 120 個字元的字串會被截斷，避免單一值撐開整列。點「展開」可看到完整字串；工具列「Copy value」按鈕永遠會複製完整文字。
- 檢視器會執行 URL 或自動讀取圖片嗎？
- 不會。URL 會變成可點擊連結，在新分頁開啟並帶 rel=noreferrer noopener——頁面本身不會發出請求。看起來像圖片的 URL 也不會被預先載入，只渲染連結。
- 可以搜尋巢狀鍵嗎？
- 可以——搜尋框會比對任何鍵或葉值（不分大小寫、部分相符）。命中的列會就地高亮，父層路徑保持收合直到你展開。
- Tree 檢視與 Raw 檢視差在哪？
- Tree 檢視是可瀏覽、型別感知的樹。Raw 檢視是唯讀編輯面板，顯示原始輸入（適合對照某個節點來自哪一行原始碼）。兩種檢視共用同一份輸入。
- 我的 JSON 會被傳送到伺服器嗎？
- 不會。解析、建樹、搜尋、複製都在你的瀏覽器內完成；頁面不會上傳任何資料。