📝工具簡介
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 數據會保存或上傳嗎？
不會。所有解析與處理均在瀏覽器本地完成，不會將代碼發送到任何伺服器，刷新頁面後數據即清除，請放心使用。