Utilia
Kategorie ▾
Jazyk: cs ▾

Prohlížeč AST pro JavaScript

Vlož JavaScript a prozkoumej jeho abstraktní syntaktický strom (ESTree, parser Acorn) přímo v prohlížeči. Klikni na uzel a export stromu jako JSON.

Typ zdroje
Uzly
–
Maximální hloubka
–
Příkazy na nejvyšší úrovni
–
Syntaktický strom

Kliknutím na uzel označíš jeho kód. Kliknutím nebo pohybem kurzoru v kódu najdeš příslušný uzel.

    Vybraný uzel

    Vyber uzel ve stromu nebo klikni do kódu.

    JSON ve formátu ESTree

    Jak prozkoumat AST kódu v JavaScriptu

    1. Vlož kód do pole Kód JavaScriptu nebo klikni na Načíst příklad a začni z malého modulu.
    2. Vyber Typ zdroje: Modul (import/export, striktní režim) pro moduly ES, nebo Skript (klasický) pro běžné skripty, které mohou používat nestriktní konstrukce, například with.
    3. Strom se aktualizuje krátce poté, co přestaneš psát. Tlačítkem Analyzovat ho spustíš okamžitě.
    4. V Syntaktickém stromu rozbalíš nebo sbalíš uzel kliknutím na malou šipku. Kliknutím na název uzlu označíš odpovídající kód v editoru. Panel Vybraný uzel ukazuje jeho typ, vlastnost, do které patří, rozsah znaků, řádek a sloupec, jednoduché vlastnosti (jméno, operátor, původní hodnotu…) i jeho zdrojový text.
    5. Funguje to i obráceně: klikni kamkoli do kódu, posuň kurzor klávesnicí nebo označ část kódu. Nejhlubší uzel, který ji obsahuje, se ve stromu rozbalí a zvýrazní.
    6. V části JSON ve formátu ESTree uvidíš celý strom jako JSON, s volbou Zahrnout pozice (start, end, loc) nebo bez ní. Pak ho můžeš Kopírovat nebo Stáhnout JSON.

    Počítadla ukazují počet Uzlů, Maximální hloubku stromu a počet Příkazů na nejvyšší úrovni.

    Co je abstraktní syntaktický strom?

    Než může interpret JavaScriptu, linter nebo bundler s tvým kódem cokoli udělat, převede text na strom uzlů. Každý uzel má type (VariableDeclaration, CallExpression, Identifier…) a potomky uložené v pojmenovaných vlastnostech. Pro total += size; dostaneš ExpressionStatement, jehož expression je AssignmentExpression s operátorem +=, levým identifikátorem total a pravým identifikátorem size. Závorky, středníky i komentáře zmizí: strom si ponechává jen podstatnou strukturu, a proto se mu říká abstraktní.

    Nástroj používá Acorn, malý a rychlý parser, na kterém stojí řada nástrojů pro JavaScript, s nastavením ecmaVersion: "latest". Výstup odpovídá formátu ESTree, který generuje také Espree (ESLint) a rozumí mu většina nástrojů pro transformaci kódu. Přesná znalost typů uzlů je nezbytná, když píšeš pravidlo pro ESLint, codemod pro Babel nebo jscodeshift, plugin pro Prettier či jakýkoli skript, který kód analyzuje.

    Pozice, rozsahy a export do JSON

    Každý uzel nese hodnoty start a end, tedy posun prvního znaku a znaku těsně za posledním, a objekt loc s řádky (od 1) a sloupci. V JSON začínají sloupce od 0, stejně jako ve výstupu Acornu. Panel Vybraný uzel je ukazuje od 1, jako většina editorů. Zrušením volby Zahrnout pozice (start, end, loc) získáš lehčí JSON, který se snáz porovnává mezi dvěma verzemi kódu.

    Některé hodnoty nelze v JSON zapsat: literály regulárních výrazů dostanou "value": null (vlastnost regex si ponechá vzor a příznaky) a literály BigInt se zapisují jako řetězce, jak doporučuje specifikace ESTree.

    Limity a soukromí

    Kód se zpracovává ve tvém prohlížeči a nikdy se nespouští ani nikam neodesílá: parser text pouze čte. Vstup je omezen na jeden milion znaků. Velmi rozsáhlé stromy se vykreslují postupně, po dávkách potomků, a JSON, který je na náhled příliš velký, lze přesto stáhnout. JSX a TypeScript nejsou standardní JavaScript, takže je Acorn hlásí jako syntaktické chyby.

    Časté dotazy

    Proč se zobrazuje „Syntaktická chyba na řádku 1, ve sloupci 1“?

    Kód není pro zvolený typ zdroje platný JavaScript. Zpráva uvádí řádek, sloupec a vysvětlení od Acornu. Častou příčinou je import nebo export při zvoleném Skriptu (klasickém), případně typové anotace TypeScriptu nebo JSX, které Acorn nezpracuje.

    Jaký je rozdíl mezi modulem a skriptem?

    Moduly jsou vždy ve striktním režimu, povolují import, export a await na nejvyšší úrovni a zakazují with či osmičkové literály. Skripty představují klasický režim značky <script>. Volba se zapisuje také do vlastnosti sourceType uzlu Program.

    Spouští se kód?

    Ne. Analýza pouze převádí text na datovou strukturu. Nic se nevyhodnocuje, nevolá se žádná funkce a neprobíhá žádný síťový požadavek, takže lze bezpečně zkoumat i nedůvěryhodný či přímo škodlivý kód.

    Zobrazují se ve stromu komentáře?

    Ne. ESTree k uzlům komentáře nepřipojuje, proto ve stromu nejsou. Ve zdrojovém textu uzlu v panelu Vybraný uzel je ale vidět.

    Jakou verzi JavaScriptu nástroj podporuje?

    Acorn je nastaven na nejnovější verzi ECMAScriptu, kterou zná. Zahrnuje volitelné řetězení, operátor nullish coalescing, BigInt, pole tříd a soukromé metody, await na nejvyšší úrovni, příznaky regulárních výrazů, například v, a další novou syntaxi.

    Související nástroje