Visualiseur et explorateur JavaScript AST
Analysez et explorez le code JavaScript en tant qu'arbre de syntaxe abstraite interactif. Collez ou téléchargez n'importe quel code JS pour voir sa structure arborescente analysée avec des types de nœuds codés par couleur, des branches extensibles, des propriétés détaillées et un filtrage des types de nœuds. Parfait pour comprendre la structure du code, analyser les scripts obscurcis et apprendre le fonctionnement des analyseurs 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
Pourquoi utiliser notre visualiseur JavaScript AST ?
- Visualisation AST instantanée : analysez n'importe quel code JavaScript et visualisez instantanément son arbre de syntaxe abstraite sous la forme d'un arbre interactif. Collez ou téléchargez du code JS et voyez immédiatement la structure analysée avec des types de nœuds codés par couleur, des branches extensibles et des informations détaillées sur les propriétés de chaque nœud. Toute analyse s'effectue localement dans votre navigateur.
- Analyse de code sécurisée et privée : votre code source JavaScript ne quitte jamais votre appareil. Toutes les analyses, générations d'arborescences et analyses AST se déroulent entièrement dans votre navigateur en utilisant du JavaScript pur. Pas de téléchargement, pas de suivi, pas de traitement côté serveur : confidentialité totale pour tout le code que vous analysez.
- JS AST Explorer Online - Aucune installation : utilisez le visualiseur JavaScript AST directement dans n'importe quel navigateur moderne sans téléchargements, applications ou plugins requis. Fonctionne hors ligne après le premier chargement et gère n'importe quelle taille d'entrée JavaScript. 100 % gratuit pour toujours, sans inscription requise.
- Navigation et filtrage interactifs dans les arbres : parcourez les arbres AST complexes avec des nœuds extensibles/réductibles, recherchez par type de nœud et affichez les propriétés détaillées de tout nœud sélectionné. Les types de nœuds codés par couleur facilitent l'identification en un coup d'œil des déclarations de fonctions, des déclarations de variables, des expressions et bien plus encore.
Cas d'utilisation courants du visualiseur JavaScript AST
- Analyse du code source JavaScript : les développeurs utilisent le visualiseur AST pour comprendre la structure du code source JavaScript en affichant sa représentation arborescente analysée. Découvrez comment l'analyseur interprète votre code, identifiez les constructions ambiguës et vérifiez que la structure de votre code correspond à votre intention.
- Ingénierie inverse de code obscurci : les chercheurs en sécurité et les ingénieurs inverses utilisent le visualiseur AST pour analyser le code JavaScript obscurci. En visualisant la structure arborescente analysée, les modèles cachés, les chaînes codées et les modifications du flux de contrôle deviennent visibles même lorsque le code source est intentionnellement masqué.
- Éducation et apprentissage en programmation : les étudiants et les enseignants utilisent le visualiseur JavaScript AST pour apprendre comment les analyseurs JavaScript interprètent le code. La représentation visuelle de l'arborescence rend tangibles des concepts abstraits tels que le levage, la portée et l'évaluation de l'expression en montrant exactement comment l'analyseur structure chaque construction.
- Linting de code et vérification de la syntaxe : les ingénieurs d'assurance qualité utilisent le visualiseur AST pour vérifier que le code est syntaxiquement valide et structuré comme prévu. L'arborescence analysée révèle des erreurs de syntaxe, une imbrication inattendue et des problèmes structurels qui pourraient passer inaperçus lors de la lecture directe du code source.
- Transformation de code et développement d'outils : les développeurs qui créent des outils de transformation de code, des linters ou des minificateurs utilisent le visualiseur AST pour comprendre comment leur code cible sera analysé. Consultez les types de nœuds, les positions et les propriétés exacts produits par l'analyseur pour écrire une logique de transformation précise.
- Audit de sécurité et analyse des vulnérabilités : les auditeurs de sécurité utilisent le visualiseur JavaScript AST pour analyser le code potentiellement malveillant. L'arborescence analysée révèle les appels eval(), l'accès dynamique aux propriétés, les constructions de fonctions suspectes et d'autres modèles pouvant indiquer des tentatives d'injection de code ou d'obscurcissement.
Qu'est-ce qu'un arbre de syntaxe abstraite JavaScript (AST) ?
Un arbre de syntaxe abstraite (AST) est une représentation arborescente de la structure syntaxique du code source JavaScript. Chaque nœud de l'arborescence représente une construction apparaissant dans le code source, telle qu'une déclaration de fonction, une déclaration de variable, une expression binaire ou une instruction if. La structure arborescente capture les relations hiérarchiques entre ces constructions, montrant quels nœuds sont les enfants des autres.
Les AST constituent la base de la plupart des outils d'analyse de code : les compilateurs, les linters (ESLint), les formateurs (Prettier), les minificateurs (Terser) et les obfuscateurs fonctionnent tous en analysant le code source en un AST, en le transformant et en générant un nouveau code à partir de l'arborescence modifiée. Notre visualiseur JavaScript AST rend cette représentation interne visible et explorable, vous aidant ainsi à comprendre exactement comment un analyseur interprète la structure de votre code.
Comment fonctionne notre visualiseur JavaScript AST
- 1. Analyse lexicale (tokénisation) : l'outil divise d'abord votre code source JavaScript en jetons - les plus petites unités significatives telles que les mots-clés (fonction, const, if), les identifiants (noms de variables et de fonctions), les opérateurs (+, =, =>) et la ponctuation ((, {',;). Chaque jeton est étiqueté avec son type et sa position dans la source.
- 2. Analyse syntaxique : le flux de jetons est ensuite analysé selon les règles de grammaire JavaScript pour créer l'arbre de syntaxe abstraite. L'analyseur reconnaît les constructions du langage telles que les déclarations de fonctions, les définitions de classes, les déclarations de variables, les boucles, les conditions et les expressions, en les organisant dans une structure arborescente hiérarchique où les nœuds parents contiennent des nœuds enfants qui représentent leurs éléments constitutifs.
- 3. Rendu et interaction de l'arbre : l'AST analysé est rendu sous la forme d'un arbre pliable interactif. Chaque nœud est codé par couleur selon sa catégorie de type (déclarations, instructions, expressions, modèles), et cliquer sur un nœud révèle ses propriétés détaillées, notamment le type, la position (ligne/colonne) et les références enfants. Vous pouvez développer et réduire les branches, rechercher par type de nœud et explorer la structure arborescente complète.
Types et catégories de nœuds AST clés
- Programme : Le nœud racine représentant l’intégralité du fichier JavaScript. Contient un tableau de corps avec toutes les instructions de niveau supérieur, y compris les importations, les déclarations de fonctions, les déclarations de classes et les déclarations de variables.
- Déclarations : nœuds représentant des constructions nommées - FunctionDeclaration (fonction avec nom, paramètres, corps), VariableDeclaration (const/let/var avec déclarateurs), ClassDeclaration (classe avec corps, superClass), ImportDeclaration et ExportDeclaration.
- Déclarations : nœuds représentant des instructions exécutables - ExpressionStatement, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, SwitchStatement, etc.
- Expressions : nœuds représentant des valeurs et des opérations - BinaryExpression (a + b), CallExpression (foo()), MemberExpression (a.b), ArrowFunctionExpression, ArrayExpression, ObjectExpression, Literal, Identifier et TemplateLiteral.
Utilisation de l'explorateur AST pour l'analyse du code
Le visualiseur JavaScript AST est un outil essentiel pour toute personne travaillant avec l'analyse, la transformation ou l'obfuscation de code. Lors de l'analyse du code obscurci, l'AST révèle des modèles structurels cachés dans la source : les chaînes codées apparaissent sous forme de nœuds CallExpression avec des modèles d'arguments spécifiques, l'aplatissement du flux de contrôle s'affiche sous la forme de wrappers SwitchStatement ou WhileStatement, et l'injection de code mort apparaît sous la forme de branches inaccessibles dans l'arborescence.
À des fins d'apprentissage, le visualiseur AST permet de combler le fossé entre la façon dont vous écrivez le code et la façon dont l'analyseur l'interprète. Expérimentez avec différentes constructions JavaScript pour voir comment elles correspondent aux nœuds d'arborescence - vous remarquerez comment les fonctions fléchées et les fonctions régulières produisent différentes structures AST, ou comment la déstructuration crée des nœuds de modèle imbriqués. Tout le traitement est effectué localement dans votre navigateur sans aucune donnée envoyée à des serveurs externes.
Foire aux questions
Un visualiseur JavaScript AST est un outil qui analyse le code source JavaScript et affiche son arbre de syntaxe abstraite (AST) sous la forme d'une structure arborescente interactive et navigable. Il montre comment l'analyseur interprète votre code, en le décomposant en nœuds représentant des déclarations de fonctions, des déclarations de variables, des expressions, des instructions et d'autres constructions, avec des propriétés détaillées et des informations de position pour chaque nœud.
Notre visualiseur JavaScript AST utilise un analyseur dédié qui suit de près la grammaire des spécifications ECMAScript. Il gère les fonctionnalités JavaScript modernes, notamment les fonctions fléchées, les littéraux de modèles, la déstructuration, l'async/wait, les classes, les modules et la syntaxe ES6+. Bien qu'il ne couvre pas tous les cas extrêmes de la spécification ECMAScript complète, il analyse avec précision la grande majorité du code JavaScript réel que vous rencontrerez.
Absolument. Toutes les analyses et générations AST se déroulent entièrement dans votre navigateur en utilisant du JavaScript pur. Votre code source, qu'il s'agisse d'algorithmes propriétaires, de scripts obscurcis ou de logique métier sensible, ne quitte jamais votre appareil. Aucune donnée n'est téléchargée sur un serveur et il n'y a aucun suivi ni stockage du code que vous analysez.
Oui, le visualiseur AST est un outil précieux pour la rétro-ingénierie du JavaScript obscurci. En affichant la structure arborescente analysée, vous pouvez identifier les modèles d'obscurcissement tels que l'aplatissement du flux de contrôle (instructions de commutation avec des répartiteurs), les charges utiles de chaînes codées (expressions d'appel avec des modèles d'arguments spécifiques), l'injection de code mort (branches inaccessibles) et les remplacements de chaînes basés sur un tableau. L'arborescence visuelle rend ces modèles beaucoup plus faciles à repérer que la lecture directe de la source.
L'explorateur AST prend en charge plus de 30 types de nœuds couvrant toute la gamme de la syntaxe JavaScript. Ceux-ci incluent Program, FunctionDeclaration, VariableDeclaration, ClassDeclaration, ImportDeclaration, ExportDeclaration, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, BinaryExpression, CallExpression, MemberExpression, ArrowFunctionExpression, ArrayExpression, ObjectExpression, TemplateLiteral, Literal, Identifier et bien d'autres. Chaque type de nœud a une couleur distincte dans l'arborescence pour une identification facile.
Chaque nœud AST affiche son type (le type de construction), sa position (ligne/colonne de début et de fin dans la source) et les propriétés spécifiques au type. Par exemple, un nœud FunctionDeclaration affiche le nom de la fonction, le tableau params et la référence du corps. Une BinaryExpression affiche l’opérateur et les opérandes gauche/droite. Un littéral affiche la valeur brute et la valeur analysée. Ces propriétés représentent les informations exactes qu'un compilateur ou un transformateur utiliserait lors du traitement du code.
Le visualiseur AST est conçu principalement pour le JavaScript standard (ES2015/ES6+). Bien qu'il gère la plupart des fonctionnalités JavaScript modernes, la syntaxe spécifique à TypeScript (annotations de type, interfaces, énumérations) et la syntaxe JSX peuvent ne pas être analysées correctement. Pour l'analyse TypeScript ou JSX, supprimez les annotations de type et les balises JSX avant l'analyse, ou utilisez un explorateur AST dédié à TypeScript.
La visionneuse d'arborescence fournit des nœuds réductibles afin que vous puissiez développer uniquement les branches qui vous intéressent. Vous pouvez également filtrer les nœuds par type à l'aide de l'entrée de recherche/filtrage - tapez un nom de type de nœud comme FunctionDeclaration ou VariableDeclaration pour mettre en évidence les nœuds correspondants. Les arbres de grande taille sont automatiquement gérables grâce à la divulgation progressive : commencez par développer le corps de niveau supérieur, puis explorez les déclarations et expressions spécifiques.
Oui, notre visualiseur JavaScript AST est 100 % gratuit, sans coûts cachés ni limitations. Aucune inscription n'est requise, aucun niveau premium, aucune limite d'utilisation, aucune restriction de taille de fichier et aucune publicité. Utilisez-le un nombre illimité de fois pour tout projet personnel ou commercial. Toutes les analyses et visualisations s'effectuent localement dans votre navigateur.