💻 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）

🔗 相关工具

📝工具简介

✨功能特点

🎯使用场景