📝工具简介
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 数据会保存或上传吗？
不会。所有解析与处理均在浏览器本地完成，不会将代码发送到任何服务器，刷新页面后数据即清除，请放心使用。