AST抽象语法树查看器
在线 AST 查看器，用 acorn 解析 JavaScript 源码为抽象语法树并可视化展开节点，帮助理解代码结构，支持折叠与定位，纯前端。
💻 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.
提示：输入框内按 Tab 插入两个空格缩进。
📊 统计信息
0
节点总数
0
节点类型数
0
代码行数
0
字符数
解析后显示节点类型统计
🌲 AST 可视化
点击「解析 AST」按钮生成语法树
解析后将显示 AST 的 JSON 数据
📚 深度解析：AST 抽象语法树查看器
💡 常见使用场景
- 把代码解析成 AST 理解结构。
- 排查构建产物：把 Babel/TS 转译后的代码解析成 AST，确认装饰器、可选链等语法被降级成了什么形态，定位兼容性问题。
查看
`1+2*3` → Binary(+ , 1, Binary(*,2,3)) 树。
❓ 常见问题（FAQ）
- AST 用途？
- 编译、格式化、静态分析都基于 AST。
- AST 与语法树、CST 是一回事吗？
- 不完全。CST（具体语法树）保留全部词法细节（括号、分号、注释），AST 则去掉不影响语义的节点、只保留结构。多数转译与静态分析工具基于 AST，因为更小更好遍历；需要无损格式化时才用 CST。
▼
工具简介
AST（Abstract Syntax Tree，抽象语法树）是源代码的抽象语法结构的树状表现形式。本工具使用 acorn 解析器将 JavaScript 代码解析为 ESTree 规范的 AST，并以可折叠的树形结构直观展示每个节点的类型、属性与位置信息，是理解代码结构、开发编译插件、编写 Babel/ESLint 插件时的得力助手。
功能特点
- 基于 acorn 解析器，兼容 ESTree 规范
- 可折叠树形结构，节点层级一目了然
- 节点按类型分色高亮（声明/表达式/语句/字面量）
- 点击节点自动定位并高亮对应源码
- 节点类型统计与分布可视化
- 支持 ES5 至 latest 多版本切换
- 支持 script / module 两种源类型
- 树形视图与原始 JSON 视图自由切换
- 一键复制 AST JSON，便于二次开发
- 纯前端运行，代码不上传，安全可靠
使用场景
- 学习编译原理，理解代码如何被解析
- 开发 Babel 插件前调试 AST 结构
- 编写 ESLint 自定义规则
- 分析代码复杂度与语法构成
- 调试代码转换与 AST 操作工具
- 教学演示 JavaScript 语法结构