Visualizador e explorador JavaScript AST
Analise e explore o código JavaScript como uma árvore de sintaxe abstrata interativa. Cole ou carregue qualquer código JS para ver sua estrutura de árvore analisada com tipos de nós codificados por cores, ramificações expansíveis, propriedades detalhadas e filtragem de tipo de nó. Perfeito para compreender a estrutura do código, analisar scripts ofuscados e aprender como funcionam os analisadores de JavaScript.
Parse JavaScript code into an interactive Abstract Syntax Tree. Paste your code below, then explore the tree by expanding nodes and clicking to inspect properties.
Click any AST node to view its properties
Por que usar nosso visualizador JavaScript AST?
- Visualização AST instantânea: analise qualquer código JavaScript e visualize sua árvore de sintaxe abstrata instantaneamente como uma árvore interativa. Cole ou carregue o código JS e veja imediatamente a estrutura analisada com tipos de nós codificados por cores, ramificações expansíveis e informações detalhadas de propriedades para cada nó. Toda a análise acontece localmente no seu navegador.
- Análise de código segura e privada: seu código-fonte JavaScript nunca sai do seu dispositivo. Toda a análise, geração de árvore e análise AST acontece inteiramente no seu navegador usando JavaScript puro. Sem uploads, sem rastreamento, sem processamento no servidor – privacidade total para todo o código que você analisa.
- JS AST Explorer Online - Sem instalação: Use o visualizador JavaScript AST diretamente em qualquer navegador moderno, sem necessidade de downloads, aplicativos ou plug-ins. Funciona offline após o primeiro carregamento e lida com qualquer tamanho de entrada JavaScript. 100% gratuito para sempre, sem necessidade de inscrição.
- Navegação e filtragem de árvore interativa: navegue em árvores AST complexas com nós expansíveis/recolhíveis, pesquise por tipo de nó e visualize propriedades detalhadas de qualquer nó selecionado. Os tipos de nós codificados por cores facilitam a identificação rápida de declarações de funções, declarações de variáveis, expressões e muito mais.
Casos de uso comuns para JavaScript AST Visualizer
- Análise do código-fonte JavaScript: os desenvolvedores usam o visualizador AST para compreender a estrutura do código-fonte JavaScript visualizando sua representação em árvore analisada. Veja como o analisador interpreta seu código, identifique construções ambíguas e verifique se a estrutura do seu código corresponde à sua intenção.
- Engenharia reversa de código ofuscado: pesquisadores de segurança e engenheiros reversos usam o visualizador AST para analisar código JavaScript ofuscado. Ao visualizar a estrutura em árvore analisada, padrões ocultos, strings codificadas e modificações no fluxo de controle tornam-se visíveis mesmo quando o código-fonte é intencionalmente obscurecido.
- Educação e aprendizagem de programação: alunos e educadores usam o visualizador JavaScript AST para aprender como os analisadores JavaScript interpretam o código. A representação visual da árvore torna tangíveis conceitos abstratos como elevação, escopo e avaliação de expressão, mostrando exatamente como o analisador estrutura cada construção.
- Linting de código e verificação de sintaxe: os engenheiros de garantia de qualidade usam o visualizador AST para verificar se o código é sintaticamente válido e estruturado conforme o esperado. A árvore analisada revela erros de sintaxe, aninhamentos inesperados e problemas estruturais que podem passar despercebidos ao ler o código-fonte diretamente.
- Transformação de código e desenvolvimento de ferramentas: os desenvolvedores que criam ferramentas de transformação de código, linters ou minificadores usam o visualizador AST para entender como seu código de destino será analisado. Veja os tipos exatos de nós, posições e propriedades produzidas pelo analisador para escrever uma lógica de transformação precisa.
- Auditoria de segurança e análise de vulnerabilidades: Os auditores de segurança usam o visualizador JavaScript AST para analisar códigos potencialmente maliciosos. A árvore analisada revela chamadas eval(), acesso dinâmico a propriedades, construções de funções suspeitas e outros padrões que podem indicar injeção de código ou tentativas de ofuscação.
O que é uma árvore de sintaxe abstrata JavaScript (AST)?
Uma árvore de sintaxe abstrata (AST) é uma representação em árvore da estrutura sintática do código-fonte JavaScript. Cada nó na árvore representa uma construção que ocorre no código-fonte - como uma declaração de função, declaração de variável, expressão binária ou instrução if. A estrutura em árvore captura os relacionamentos hierárquicos entre essas construções, mostrando quais nós são filhos de outros.
ASTs são a base para a maioria das ferramentas de análise de código - compiladores, linters (ESLint), formatadores (Prettier), minificadores (Terser) e ofuscadores, todos trabalham analisando o código-fonte em um AST, transformando-o e gerando novo código a partir da árvore modificada. Nosso visualizador JavaScript AST torna essa representação interna visível e explorável, ajudando você a entender exatamente como um analisador interpreta sua estrutura de código.
Como funciona nosso visualizador JavaScript AST
- 1. Análise lexical (tokenização): a ferramenta primeiro divide seu código-fonte JavaScript em tokens - as menores unidades significativas, como palavras-chave (função, const, if), identificadores (nomes de variáveis e funções), operadores (+, =, =>) e pontuação ((, {',;). Cada token é marcado com seu tipo e posição na fonte.
- 2. Análise Sintática: O fluxo de token é então analisado de acordo com as regras gramaticais do JavaScript para construir a Árvore de Sintaxe Abstrata. O analisador reconhece construções de linguagem como declarações de funções, definições de classes, declarações de variáveis, loops, condicionais e expressões, organizando-as em uma estrutura de árvore hierárquica onde os nós pais contêm nós filhos que representam suas partes constituintes.
- 3. Renderização e interação em árvore: O AST analisado é renderizado como uma árvore dobrável interativa. Cada nó é codificado por cores por sua categoria de tipo (declarações, instruções, expressões, padrões), e clicar em um nó revela suas propriedades detalhadas, incluindo tipo, posição (linha/coluna) e referências filho. Você pode expandir e recolher ramificações, pesquisar por tipo de nó e explorar toda a estrutura da árvore.
Principais tipos e categorias de nós AST
- Programa: O nó raiz que representa todo o arquivo JavaScript. Contém uma matriz corporal com todas as instruções de nível superior, incluindo importações, declarações de funções, declarações de classes e declarações de variáveis.
- Declarações: Nós que representam construções nomeadas - FunctionDeclaration (função com nome, parâmetros, corpo), VariableDeclaration (const/let/var com declaradores), ClassDeclaration (classe com corpo, superClasse), ImportDeclaration e ExportDeclaration.
- Instruções: Nós que representam instruções executáveis – ExpressionStatement, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, SwitchStatement e muito mais.
- Expressões: Nós que representam valores e operações - BinaryExpression (a + b), CallExpression (foo()), MemberExpression (a.b), ArrowFunctionExpression, ArrayExpression, ObjectExpression, Literal, Identifier e TemplateLiteral.
Usando o AST Explorer para análise de código
O visualizador JavaScript AST é uma ferramenta essencial para quem trabalha com análise, transformação ou ofuscação de código. Ao analisar o código ofuscado, o AST revela padrões estruturais que estão ocultos na origem - strings codificadas aparecem como nós CallExpression com padrões de argumento específicos, o nivelamento do fluxo de controle aparece como wrappers SwitchStatement ou WhileStatement e a injeção de código morto aparece como ramificações inacessíveis na árvore.
Para fins de aprendizagem, o visualizador AST ajuda a preencher a lacuna entre como você escreve o código e como o analisador o interpreta. Experimente diferentes construções JavaScript para ver como elas são mapeadas para nós de árvore - você notará como as funções de seta versus funções regulares produzem estruturas AST diferentes ou como a desestruturação cria nós de padrão aninhados. Todo o processamento é feito localmente no seu navegador, sem envio de dados para servidores externos.
Perguntas frequentes
Um visualizador JavaScript AST é uma ferramenta que analisa o código-fonte JavaScript e exibe sua árvore de sintaxe abstrata (AST) como uma estrutura de árvore navegável e interativa. Ele mostra como o analisador interpreta seu código, dividindo-o em nós que representam declarações de funções, declarações de variáveis, expressões, instruções e outras construções, com propriedades detalhadas e informações de posição para cada nó.
Nosso visualizador JavaScript AST usa um analisador dedicado que segue de perto a gramática da especificação ECMAScript. Ele lida com recursos JavaScript modernos, incluindo funções de seta, literais de modelo, desestruturação, assíncrono/espera, classes, módulos e sintaxe ES6+. Embora possa não cobrir todos os casos extremos da especificação ECMAScript completa, ele analisa com precisão a grande maioria do código JavaScript do mundo real que você encontrará.
Absolutamente. Toda a análise e geração de AST acontece inteiramente no seu navegador usando JavaScript puro. Seu código-fonte, seja algoritmo proprietário, scripts ofuscados ou lógica de negócios confidencial, nunca sai do seu dispositivo. Nenhum dado é carregado em nenhum servidor e não há rastreamento ou armazenamento de nenhum código que você analisa.
Sim, o visualizador AST é uma ferramenta valiosa para engenharia reversa de JavaScript ofuscado. Ao visualizar a estrutura de árvore analisada, você pode identificar padrões de ofuscação, como nivelamento de fluxo de controle (instruções de switch com despachantes), cargas úteis de string codificadas (expressões de chamada com padrões de argumento específicos), injeção de código morto (ramificações inacessíveis) e substituições de string baseadas em array. A árvore visual torna esses padrões muito mais fáceis de detectar do que ler a fonte diretamente.
O AST Explorer oferece suporte a mais de 30 tipos de nós, cobrindo toda a gama de sintaxe JavaScript. Isso inclui Programa, FunctionDeclaration, VariableDeclaration, ClassDeclaration, ImportDeclaration, ExportDeclaration, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, BinaryExpression, CallExpression, MemberExpression, ArrowFunctionExpression, ArrayExpression, ObjectExpression, TemplateLiteral, Literal, Identifier e muitos mais. Cada tipo de nó possui uma cor distinta na árvore para fácil identificação.
Cada nó AST exibe seu tipo (o tipo de construção), posição (linha/coluna inicial e final na origem) e propriedades específicas do tipo. Por exemplo, um nó FunctionDeclaration mostra o nome da função, a matriz de parâmetros e a referência do corpo. Uma BinaryExpression mostra o operador e os operandos esquerdo/direito. Um Literal mostra o valor bruto e o valor analisado. Essas propriedades representam as informações exatas que um compilador ou transformador usaria ao processar o código.
O visualizador AST foi projetado principalmente para JavaScript padrão (ES2015/ES6+). Embora lide com a maioria dos recursos JavaScript modernos, a sintaxe específica do TypeScript (anotações de tipo, interfaces, enums) e a sintaxe JSX podem não ser analisadas corretamente. Para análise TypeScript ou JSX, remova anotações de tipo e tags JSX antes de analisar ou use um AST Explorer dedicado a TypeScript.
O visualizador de árvore fornece nós recolhíveis para que você possa expandir apenas as ramificações de seu interesse. Você também pode filtrar nós por tipo usando a entrada de pesquisa/filtro - digite um nome de tipo de nó como FunctionDeclaration ou VariableDeclaration para destacar os nós correspondentes. Árvores grandes são gerenciadas automaticamente por meio de divulgação progressiva – comece expandindo o corpo de nível superior e, em seguida, aprofunde-se em declarações e expressões específicas.
Sim, nosso visualizador JavaScript AST é 100% gratuito, sem custos ou limitações ocultas. Não há necessidade de inscrição, nível premium, limites de uso, restrições de tamanho de arquivo e anúncios. Use-o vezes ilimitadas para qualquer projeto pessoal ou comercial. Toda a análise e visualização acontecem localmente no seu navegador.