📝工具簡介
AST（Abstract Syntax Tree，抽象語法樹）是原始碼的抽象語法結構的樹狀表現形式。本工具使用 acorn 解析器將 JavaScript 程式碼解析為 ESTree 規範的 AST，並以可摺疊的樹形結構直觀展示每個節點的型別、屬性與位置資訊，是理解程式碼結構、開發編譯外掛、編寫 Babel/ESLint 外掛時的得力助手。
✨功能特點
- 基於 acorn 解析器，相容 ESTree 規範
- 可摺疊樹形結構，節點層級一目瞭然
- 節點按型別分色高亮（宣告/表示式/語句/字面量）
- 點選節點自動定位並高亮對應原始碼
- 節點型別統計與分佈視覺化
- 支援 ES5 至 latest 多版本切換
- 支援 script / module 兩種源型別
- 樹形檢視與原始 JSON 檢視自由切換
- 一鍵複製 AST JSON，便於二次開發
- 純前端執行，程式碼不上傳，安全可靠
🎯使用場景
- 學習編譯原理，理解程式碼如何被解析
- 開發 Babel 外掛前除錯 AST 結構
- 編寫 ESLint 自定義規則
- 分析程式碼複雜度與語法構成
- 除錯程式碼轉換與 AST 操作工具
- 教學演示 JavaScript 語法結構
💬常見問題
為什麼解析時報語法錯誤？
請檢查程式碼是否符合所選 ECMAScript 版本的語法。例如使用了 import/export 時需將 SourceType 切換為 module；使用了可選鏈(?.)、空值合併(??)等新語法時需選擇 ES2020 及以上版本。
節點上的數字 [start..end] 是什麼意思？
這是該節點在原始碼中的字元偏移區間（起始位置到結束位置）。點選任意節點，工具會自動在程式碼輸入框中選中並高亮對應的原始碼片段。
"保留位置資訊"和"保留註釋"有什麼區別？
勾選"保留位置資訊"後，每個節點會額外攜帶 loc 欄位，包含行列資訊（line/column）；勾選"保留註釋"後，程式碼中的註釋會被收集並展示在統計資訊中。
AST 資料會儲存或上傳嗎？
不會。所有解析與處理均在瀏覽器本地完成，不會將程式碼傳送到任何伺服器，重新整理頁面後資料即清除，請放心使用。