Visualizador y explorador de JavaScript AST

• Visualización AST instantánea: analice cualquier código JavaScript y visualice su árbol de sintaxis abstracta instantáneamente como un árbol interactivo. Pegue o cargue código JS y vea inmediatamente la estructura analizada con tipos de nodos codificados por colores, ramas expandibles e información detallada de propiedades para cada nodo. Todo el análisis se realiza localmente en su navegador.
• Análisis de código seguro y privado: su código fuente JavaScript nunca sale de su dispositivo. Todo el análisis, la generación de árboles y el análisis AST se realizan completamente en su navegador utilizando JavaScript puro. Sin cargas, sin seguimiento, sin procesamiento del lado del servidor: privacidad total para todo el código que analice.
• JS AST Explorer Online - Sin instalación: utilice el visualizador AST de JavaScript directamente en cualquier navegador moderno sin necesidad de descargas, aplicaciones ni complementos. Funciona sin conexión después de la primera carga y maneja cualquier tamaño de entrada de JavaScript. 100% gratis para siempre sin necesidad de registrarse.
• Navegación y filtrado de árboles interactivos: navegue por árboles AST complejos con nodos expandibles/contraíbles, busque por tipo de nodo y vea propiedades detalladas de cualquier nodo seleccionado. Los tipos de nodos codificados por colores facilitan la identificación de declaraciones de funciones, declaraciones de variables, expresiones y más de un vistazo.

• Análisis del código fuente de JavaScript: los desarrolladores utilizan el visualizador AST para comprender la estructura del código fuente de JavaScript al ver su representación de árbol analizada. Vea cómo el analizador interpreta su código, identifique construcciones ambiguas y verifique que la estructura de su código coincida con su intención.
• Ingeniería inversa de código ofuscado: los investigadores de seguridad y los ingenieros inversos utilizan el visualizador AST para analizar el código JavaScript ofuscado. Al ver la estructura de árbol analizada, los patrones ocultos, las cadenas codificadas y las modificaciones del flujo de control se vuelven visibles incluso cuando el código fuente se oculta intencionalmente.
• Educación y aprendizaje de programación: los estudiantes y educadores utilizan el visualizador AST de JavaScript para aprender cómo los analizadores de JavaScript interpretan el código. La representación visual del árbol hace tangibles conceptos abstractos como elevación, alcance y evaluación de expresiones al mostrar exactamente cómo el analizador estructura cada construcción.
• Código Linting y verificación de sintaxis: los ingenieros de control de calidad utilizan el visualizador AST para verificar que el código sea sintácticamente válido y esté estructurado como se esperaba. El árbol analizado revela errores de sintaxis, anidamientos inesperados y problemas estructurales que podrían pasarse por alto al leer el código fuente directamente.
• Transformación de código y desarrollo de herramientas: los desarrolladores que crean herramientas de transformación de código, linters o minificadores utilizan el visualizador AST para comprender cómo se analizará su código de destino. Vea los tipos de nodos, las posiciones y las propiedades exactas producidas por el analizador para escribir una lógica de transformación precisa.
• Auditoría de seguridad y análisis de vulnerabilidad: los auditores de seguridad utilizan el visualizador AST de JavaScript para analizar código potencialmente malicioso. El árbol analizado revela llamadas a eval(), acceso a propiedades dinámicas, construcciones de funciones sospechosas y otros patrones que pueden indicar inyección de código u intentos de ofuscación.

Un árbol de sintaxis abstracta (AST) es una representación en árbol de la estructura sintáctica del código fuente JavaScript. Cada nodo en el árbol representa una construcción que ocurre en el código fuente, como una declaración de función, una declaración de variable, una expresión binaria o una declaración if. La estructura de árbol captura las relaciones jerárquicas entre estas construcciones, mostrando qué nodos son hijos de otros.

Los AST son la base de la mayoría de las herramientas de análisis de código: compiladores, linters (ESLint), formateadores (Prettier), minificadores (Terser) y ofuscadores funcionan analizando el código fuente en un AST, transformándolo y generando nuevo código a partir del árbol modificado. Nuestro visualizador AST de JavaScript hace que esta representación interna sea visible y explorable, lo que le ayuda a comprender exactamente cómo un analizador interpreta la estructura de su código.

1. 1. Análisis léxico (tokenización): la herramienta primero divide el código fuente de JavaScript en tokens: las unidades significativas más pequeñas, como palabras clave (función, const, if), identificadores (nombres de variables y funciones), operadores (+, =, =>) y puntuación ((, {',;). Cada token está etiquetado con su tipo y posición en la fuente.
2. 2. Análisis sintáctico: luego, el flujo de tokens se analiza de acuerdo con las reglas gramaticales de JavaScript para construir el árbol de sintaxis abstracta. El analizador reconoce construcciones del lenguaje como declaraciones de funciones, definiciones de clases, declaraciones de variables, bucles, condicionales y expresiones, organizándolas en una estructura de árbol jerárquica donde los nodos principales contienen nodos secundarios que representan sus partes constituyentes.
3. 3. Interacción y representación del árbol: el AST analizado se representa como un árbol plegable interactivo. Cada nodo está codificado por colores según su categoría de tipo (declaraciones, declaraciones, expresiones, patrones) y al hacer clic en un nodo se revelan sus propiedades detalladas, incluido el tipo, la posición (línea/columna) y las referencias secundarias. Puede expandir y contraer ramas, buscar por tipo de nodo y explorar la estructura de árbol completa.

• Programa: el nodo raíz que representa todo el archivo JavaScript. Contiene una matriz de cuerpo con todas las declaraciones de nivel superior, incluidas importaciones, declaraciones de funciones, declaraciones de clases y declaraciones de variables.
• Declaraciones: Nodos que representan construcciones con nombre: FunctionDeclaration (función con nombre, parámetros, cuerpo), VariableDeclaration (const/let/var con declaradores), ClassDeclaration (clase con cuerpo, superClass), ImportDeclaration y ExportDeclaration.
• Declaraciones: nodos que representan declaraciones ejecutables: ExpressionStatement, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, SwitchStatement y más.
• Expresiones: nodos que representan valores y operaciones: BinaryExpression (a + b), CallExpression (foo()), MemberExpression (a.b), ArrowFunctionExpression, ArrayExpression, ObjectExpression, Literal, Identifier y TemplateLiteral.

El visualizador AST de JavaScript es una herramienta esencial para cualquiera que trabaje con análisis, transformación u ofuscación de código. Al analizar el código ofuscado, el AST revela patrones estructurales que están ocultos en el código fuente: las cadenas codificadas aparecen como nodos CallExpression con patrones de argumentos específicos, el aplanamiento del flujo de control se muestra como envoltorios SwitchStatement o WhileStatement, y la inyección de código inactivo aparece como ramas inalcanzables en el árbol.

Con fines de aprendizaje, el visualizador AST ayuda a cerrar la brecha entre cómo se escribe el código y cómo lo interpreta el analizador. Experimente con diferentes construcciones de JavaScript para ver cómo se asignan a los nodos del árbol; notará cómo las funciones de flecha frente a las funciones regulares producen diferentes estructuras AST, o cómo la desestructuración crea nodos de patrón anidados. Todo el procesamiento se realiza localmente en su navegador sin enviar datos a servidores externos.