Utilia
Kategórie ▾
Jazyk: sk ▾

Prehliadač AST pre JavaScript

Vlož JavaScript a prezeraj si jeho abstraktný syntaktický strom (ESTree, parser Acorn) v prehliadači. Klikaj na uzly a exportuj AST ako JSON.

Typ zdroja
Uzly
–
Maximálna hĺbka
–
Príkazy najvyššej úrovne
–
Syntaktický strom

Kliknutím na uzol vyberieš jeho kód. Kliknutím alebo presunom kurzora v kóde nájdeš jeho uzol.

    Vybraný uzol

    Vyber uzol v strome alebo klikni do kódu.

    JSON vo formáte ESTree

    Ako preskúmať AST v JavaScripte

    1. Vlož kód do poľa Kód JavaScriptu alebo klikni na Načítať príklad a začni s malým modulom.
    2. Vyber Typ zdroja: Modul (import/export, striktný režim) pre moduly ES, alebo Skript (klasický) pre bežné skripty, ktoré môžu používať vlastnosti nestriktného režimu, napríklad with.
    3. Strom sa aktualizuje chvíľu po tom, čo prestaneš písať. Kliknutím na Analyzovať ho spustíš okamžite.
    4. V Syntaktický strom rozbalíš alebo zbalíš uzol malou šípkou. Kliknutím na názov uzla vyberieš zodpovedajúci kód v editore. Panel Vybraný uzol ukazuje jeho typ, vlastnosť, do ktorej patrí, rozsah v znakoch, riadok a stĺpec, jednoduché vlastnosti (názov, operátor, pôvodná hodnota…) a zdrojový text.
    5. Funguje to aj opačne: klikni kamkoľvek do kódu, posuň kurzor klávesnicou alebo označ časť kódu. Najhlbší uzol, ktorý ju obsahuje, sa v strome rozbalí a zvýrazní.
    6. V JSON vo formáte ESTree nájdeš celý strom ako JSON, s možnosťou Zahrnúť pozície (start, end, loc) alebo bez nej. Potom ho môžeš Kopírovať alebo Stiahnuť JSON.

    Počítadlá ukazujú počet Uzly, Maximálna hĺbka stromu a počet položiek v Príkazy najvyššej úrovne.

    Čo je abstraktný syntaktický strom?

    Skôr než s tvojím kódom niečo urobí engine JavaScriptu, linter alebo bundler, rozloží text na strom uzlov. Každý uzol má type (VariableDeclaration, CallExpression, Identifier…) a potomkov uložených v pomenovaných vlastnostiach. Pre total += size; dostaneš ExpressionStatement, ktorého expression je AssignmentExpression s operátorom +=, identifikátorom total v left a identifikátorom size v right. Zátvorky, bodkočiarky a komentáre zmiznú: strom si ponecháva len podstatnú štruktúru, preto sa nazýva abstraktný.

    Nástroj používa Acorn, malý a rýchly parser, na ktorom stoja mnohé nástroje pre JavaScript, s nastavením ecmaVersion: "latest". Výstup sleduje ESTree, spoločný formát, ktorý vytvára aj Espree (ESLint) a rozumie mu väčšina nástrojov na transformáciu kódu. Presné názvy typov uzlov potrebuješ, keď píšeš pravidlo pre ESLint, codemod pre Babel alebo jscodeshift, plugin pre Prettier alebo akýkoľvek skript, ktorý analyzuje kód.

    Pozície, rozsahy a export do JSON

    Každý uzol má start a end, teda posun prvého znaku a znaku za posledným v zdroji, a objekt loc s riadkami (od 1) a stĺpcami. V JSON sa stĺpce číslujú od 0 ako vo výstupe Acornu, no panel Vybraný uzol ich ukazuje od 1, ako väčšina editorov. Ak zrušíš Zahrnúť pozície (start, end, loc), dostaneš ľahší JSON, ktorý sa lepšie porovnáva medzi dvoma verziami kódu.

    Niektoré hodnoty sa do JSON zapísať nedajú: literály regulárnych výrazov dostanú "value": null (vzor a príznaky ostanú vo vlastnosti regex) a literály BigInt sa zapíšu ako reťazce, ako odporúča špecifikácia ESTree.

    Limity a súkromie

    Kód sa analyzuje v tvojom prehliadači a nikdy sa nespúšťa ani nikam neodosiela: parser iba číta text. Vstup je obmedzený na milión znakov. Veľmi veľké stromy sa vykresľujú postupne, po dávkach potomkov, a JSON, ktorý je na náhľad priveľký, môžeš stále stiahnuť. JSX a TypeScript nie sú štandardný JavaScript, preto ich Acorn hlási ako syntaktické chyby.

    Často kladené otázky

    Prečo dostanem „Syntaktická chyba na riadku 1, v stĺpci 1“?

    Kód nie je platný JavaScript pre zvolený typ zdroja. Správa uvádza riadok, stĺpec a vysvetlenie od Acornu. Častou príčinou je import alebo export pri vybranom Skript (klasický), prípadne anotácie TypeScriptu alebo JSX, ktoré Acorn nespracuje.

    Aký je rozdiel medzi modulom a skriptom?

    Moduly sú vždy v striktnom režime, povoľujú import, export a await na najvyššej úrovni a zakazujú with či osmičkové literály. Skripty sú klasický režim značky <script>. Strom si túto voľbu zapíše aj do vlastnosti sourceType uzla Program.

    Spúšťa sa kód?

    Nie. Analýza iba premení text na dátovú štruktúru. Nič sa nevyhodnocuje, nevolá sa žiadna funkcia ani sa neodosiela sieťová požiadavka, takže môžeš bezpečne skúmať aj nedôveryhodný či škodlivý kód.

    Zobrazujú sa v strome komentáre?

    Nie. ESTree komentáre k uzlom nepripája, takže nie sú súčasťou stromu, ale v paneli Vybraný uzol ich stále vidíš v zdrojovom texte uzla.

    Ktorú verziu JavaScriptu nástroj podporuje?

    Acorn je nastavený na najnovšiu verziu ECMAScriptu, ktorú pozná. Patrí k nej voliteľné reťazenie, operátor nullish coalescing, BigInt, polia tried a súkromné metódy, await na najvyššej úrovni, príznaky regulárnych výrazov ako v a ďalšia nedávna syntax.

    Súvisiace nástroje