💻 AST AST View Device - AST ( Abstract Syntax Tree

📐 工作原理與說明

把原始碼解析成抽象語法樹（AST），直觀展示程式的語法結構。

詞法分析：把原始碼切成 token（識別符號、字面量、運算子、標點）。
語法分析：按語法規則組裝為樹，節點含 type、起止位置 start/end 與子節點。
常見節點：Program、FunctionDeclaration、VariableDeclaration、BinaryExpression、CallExpression。
用途：理解編譯流程、編寫 Babel/ESLint 外掛；注意 Acorn、Babel、TypeScript 解析器產出的結構不同。

Visualize the abstract syntax tree (AST) of your code in your browser — see how parsers break it down.

ECMAScript 版本

SourceType

保留位置資訊 (locations) 保留註釋 (comments)

JavaScript 程式碼

提示：輸入框內按 Tab 插入兩個空格縮排。

📚 深度解析：AST 抽象語法樹檢視器

💡 常見使用場景

把程式碼解析成 AST 理解結構。
排查構建產物：把 Babel/TS 轉譯後的程式碼解析成 AST，確認裝飾器、可選鏈等語法被降級成了什麼形態，定位相容性問題。

檢視

`1+2*3` → Binary(+ , 1, Binary(*,2,3)) 樹。

❓ 常見問題（FAQ）

AST 用途？: 編譯、格式化、靜態分析都基於 AST。
AST 與語法樹、CST 是一回事嗎？: 不完全。CST（具體語法樹）保留全部詞法細節（括號、分號、註釋），AST 則去掉不影響語義的節點、只保留結構。多數轉譯與靜態分析工具基於 AST，因為更小更好遍歷；需要無損格式化時才用 CST。

📖關於「AST抽象語法樹檢視器」 ▼

📝工具簡介

AST（Abstract Syntax Tree，抽象語法樹）是原始碼的抽象語法結構的樹狀表現形式。本工具使用 acorn 解析器將 JavaScript 程式碼解析為 ESTree 規範的 AST，並以可摺疊的樹形結構直觀展示每個節點的型別、屬性與位置資訊，是理解程式碼結構、開發編譯外掛、編寫 Babel/ESLint 外掛時的得力助手。

✨功能特點

基於 acorn 解析器，相容 ESTree 規範
可摺疊樹形結構，節點層級一目瞭然
節點按型別分色高亮（宣告/表示式/語句/字面量）
點選節點自動定位並高亮對應原始碼
節點型別統計與分佈視覺化
支援 ES5 至 latest 多版本切換
支援 script / module 兩種源型別
樹形檢視與原始 JSON 檢視自由切換
一鍵複製 AST JSON，便於二次開發
純前端執行，程式碼不上傳，安全可靠

🎯使用場景

學習編譯原理，理解程式碼如何被解析
開發 Babel 外掛前除錯 AST 結構
編寫 ESLint 自定義規則
分析程式碼複雜度與語法構成
除錯程式碼轉換與 AST 操作工具
教學演示 JavaScript 語法結構

💻 AST AST View Device - AST ( Abstract Syntax Tree

📊 統計資訊

🌲 AST 視覺化

📚 深度解析：AST 抽象語法樹檢視器

💡 常見使用場景

❓ 常見問題（FAQ）

📝工具簡介

✨功能特點

🎯使用場景

AST抽象語法樹檢視器

💻 AST AST View Device - AST ( Abstract Syntax Tree

📊 統計資訊

🌲 AST 視覺化

📚 深度解析：AST 抽象語法樹檢視器

💡 常見使用場景

❓ 常見問題（FAQ）

🔗 相關工具

📝工具簡介

✨功能特點

🎯使用場景