💻 AST AST View Device - AST ( Abstract Syntax Tree

📐 工作原理与说明

按所选 ECMA 版本与源码类型解析出 AST；节点判定为「含字符串 type 的非数组对象」；配色按 type 后缀分 Declaration / Expression / Statement / Literal 四类；渲染时跳过 type、start、end、loc、range、leadingComments 等键，标量属性直接展示、对象属性递归展开。统计：节点总数、类型种类数、源码行数与字符数；各类型占比 = 该类型计数 ÷ 节点总数 × 100%；定位跳转按行号 × 行高滚动，并上移三分之一视口高度

把源代码解析成抽象语法树（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。

Item

Formula / Note

Source / Standard

Node model

ESTree defines Program, Identifier and CallExpression nodes

ESTree specification

Grammar

parse trees must follow the ECMA-262 grammar

ECMA-262

Traversal

depth-first child traversal in pre or post order

ESTree specification

💻 AST AST View Device - AST ( Abstract Syntax Tree

📊 统计信息

🌲 AST 可视化

📚 深度解析：AST 抽象语法树查看器

💡 常见使用场景

❓ 常见问题（FAQ）

Formula & Standard References

📝工具简介

✨功能特点

🎯使用场景

AST抽象语法树查看器

💻 AST AST View Device - AST ( Abstract Syntax Tree

📊 统计信息

🌲 AST 可视化

📚 深度解析：AST 抽象语法树查看器

💡 常见使用场景

❓ 常见问题（FAQ）

Formula & Standard References

🔗 相关工具

🔗 相关工具

📝工具简介

✨功能特点

🎯使用场景