JavaScript-AST-Explorer

So erkunden Sie einen JavaScript-AST

1. Fügen Sie Ihren Code in das Feld JavaScript-Code ein oder klicken Sie auf Beispiel laden, um mit einem kleinen Modul zu beginnen.
2. Wählen Sie den Quelltyp: Modul (import/export, Strict Mode) für ES-Module oder Skript (klassisch) für gewöhnliche Skripte, die etwa Sloppy-Mode-Konstrukte wie with verwenden.
3. Der Baum wird kurz nach dem Tippen automatisch aktualisiert. Mit Parsen starten Sie den Vorgang sofort.
4. Im Syntaxbaum klappen Sie einen Knoten über den kleinen Pfeil auf oder zu. Ein Klick auf den Namen eines Knotens markiert den passenden Code im Editor. Das Feld Ausgewählter Knoten zeigt dann Typ, die Eigenschaft, zu der er gehört, seinen Zeichenbereich, Zeile und Spalte, seine einfachen Eigenschaften (Name, Operator, Rohwert …) und seinen Quelltext.
5. Das funktioniert auch umgekehrt: Klicken Sie irgendwo in den Code, bewegen Sie den Cursor mit der Tastatur oder markieren Sie ein Codestück – der tiefste Knoten, der diese Stelle enthält, wird im Baum aufgeklappt und hervorgehoben.
6. Öffnen Sie ESTree-JSON, um den vollständigen Baum als JSON zu sehen, wahlweise mit Positionen einbeziehen (start, end, loc). Anschließend können Sie ihn kopieren oder mit JSON herunterladen speichern.

Die Zähler zeigen die Anzahl der Knoten, die maximale Tiefe des Baums und die Zahl der Anweisungen auf oberster Ebene.

Was ist ein abstrakter Syntaxbaum?

Bevor eine JavaScript-Engine, ein Linter oder ein Bundler irgendetwas mit Ihrem Code anfangen kann, zerlegt er den Text in einen Baum aus Knoten. Jeder Knoten hat einen type (VariableDeclaration, CallExpression, Identifier …) und Kindknoten, die in benannten Eigenschaften liegen. Aus total += size; wird ein ExpressionStatement, dessen expression eine AssignmentExpression mit dem Operator +=, dem Bezeichner total als left und dem Bezeichner size als right ist. Klammern, Semikolons und Kommentare verschwinden: Der Baum behält nur die Struktur, auf die es ankommt – deshalb heißt er abstrakt.

Dieses Tool verwendet Acorn, den kleinen und schnellen Parser, der in vielen JavaScript-Werkzeugen steckt, mit ecmaVersion: "latest". Die Ausgabe folgt ESTree, dem gemeinsamen Format, das auch Espree (ESLint) erzeugt und das die meisten Werkzeuge zur Codetransformation verstehen. Die genauen Knotentypen zu kennen ist unverzichtbar, wenn Sie eine ESLint-Regel, einen Codemod für Babel oder jscodeshift, ein Prettier-Plugin oder ein beliebiges Skript zur Codeanalyse schreiben.

Positionen, Bereiche und JSON-Export

Jeder Knoten besitzt start und end, also die Offsets seines ersten Zeichens und des Zeichens direkt nach seinem letzten Zeichen im Quelltext, sowie ein loc-Objekt mit Zeilen (ab 1) und Spalten. Im JSON beginnen die Spalten wie in der Ausgabe von Acorn bei 0; das Feld Ausgewählter Knoten zählt sie dagegen wie die meisten Editoren ab 1. Deaktivieren Sie Positionen einbeziehen (start, end, loc), erhalten Sie ein schlankeres JSON, das sich zwischen zwei Codeversionen leichter vergleichen lässt.

Einige Werte lassen sich nicht als JSON darstellen: Literale regulärer Ausdrücke erhalten "value": null (ihre Eigenschaft regex enthält weiterhin Muster und Flags), und BigInt-Literale werden, wie von der ESTree-Spezifikation empfohlen, als Zeichenketten geschrieben.

Grenzen und Datenschutz

Der Code wird in Ihrem Browser geparst und weder ausgeführt noch irgendwohin gesendet: Der Parser liest nur den Text. Die Eingabe ist auf eine Million Zeichen begrenzt. Sehr große Bäume werden bei Bedarf gerendert, jeweils eine Gruppe von Kindknoten auf einmal, und ein JSON, das für die Vorschau zu groß ist, können Sie trotzdem herunterladen. JSX und TypeScript sind kein Standard-JavaScript, daher meldet Acorn sie als Syntaxfehler.