Utilia
Kategorije ▾
Jezik: hr ▾

JavaScript AST Explorer

Zalijepi JavaScript i istraži njegovo apstraktno sintaktičko stablo (ESTree, Acorn) u pregledniku. Klikni čvorove za kôd i izvezi AST kao JSON.

Vrsta izvora
Čvorovi
–
Najveća dubina
–
Naredbe najviše razine
–
Sintaktičko stablo

Klikni čvor da odabereš njegov kôd. Klikni ili pomakni kursor u kôdu da pronađeš njegov čvor.

    Odabrani čvor

    Odaberi čvor u stablu ili klikni u kôd.

    ESTree JSON

    Kako istražiti JavaScript AST

    1. Zalijepi kôd u polje JavaScript kôd ili klikni Učitaj primjer da počneš s malim modulom.
    2. Odaberi Vrsta izvora: Modul (import/export, strogi način) za ES module ili Skripta (klasična) za obične skripte koje smiju koristiti značajke nestrogog načina, poput naredbe with.
    3. Stablo se osvježi trenutak nakon što prestaneš tipkati. Klikni Analiziraj da ga pokreneš odmah.
    4. U Sintaktičko stablo klikni malu strelicu da proširiš ili sažmeš čvor. Klikni naziv čvora da u uređivaču odabereš odgovarajući kôd. Ploča Odabrani čvor prikazuje njegovu vrstu, svojstvo kojem pripada, raspon znakova, redak i stupac, jednostavna svojstva (naziv, operator, izvorna vrijednost…) i njegov izvorni tekst.
    5. Radi i obrnuto: klikni bilo gdje u kôdu, pomakni kursor tipkovnicom ili označi dio kôda pa se u stablu proširi i istakne najdublji čvor koji ga sadrži.
    6. Otvori ESTree JSON da vidiš cijelo stablo kao JSON, s opcijom Uključi položaje (start, end, loc) ili bez nje, zatim ga Kopiraj ili Preuzmi JSON.

    Brojači prikazuju broj Čvorovi, Najveća dubina stabla i broj Naredbe najviše razine.

    Što je apstraktno sintaktičko stablo?

    Prije nego što JavaScript pogon, linter ili bundler išta učini s tvojim kôdom, taj se tekst pretvara u stablo čvorova. Svaki čvor ima type (VariableDeclaration, CallExpression, Identifier…) i podređene čvorove spremljene u imenovanim svojstvima. Za total += size; dobiješ ExpressionStatement čiji je expression jedan AssignmentExpression s operatorom +=, lijevim identifikatorom total i desnim identifikatorom size. Zagrade, točke sa zarezom i komentari nestaju: stablo čuva samo strukturu koja je važna, zbog čega se i zove apstraktno.

    Alat koristi Acorn, mali i brz parser na kojem počivaju mnogi JavaScript alati, s postavkom ecmaVersion: "latest". Izlaz prati ESTree, zajednički format koji proizvodi i Espree (ESLint) i razumije većina alata za transformaciju kôda. Poznavanje točnih vrsta čvorova ključno je kad pišeš ESLint pravilo, Babel ili jscodeshift codemod, Prettier dodatak ili bilo koju skriptu koja analizira kôd.

    Položaji, rasponi i izvoz u JSON

    Svaki čvor nosi start i end, pomake prvog znaka i znaka iza posljednjeg u izvoru, te objekt loc s recima (od 1) i stupcima. U JSON-u stupci počinju od 0, kao u Acornovu izlazu. Ploča Odabrani čvor prikazuje ih od 1, kao većina uređivača. Isključi Uključi položaje (start, end, loc) da dobiješ lakši JSON koji je lakše usporediti između dvije verzije kôda.

    Nekoliko se vrijednosti ne može zapisati u JSON-u: literali regularnih izraza dobivaju "value": null (svojstvo regex čuva uzorak i zastavice), a BigInt literali zapisuju se kao nizovi znakova, kako preporučuje ESTree specifikacija.

    Ograničenja i privatnost

    Kôd se analizira u tvom pregledniku i nikada se ne izvršava niti šalje na poslužitelj: parser samo čita tekst. Unos je ograničen na milijun znakova. Vrlo velika stabla iscrtavaju se na zahtjev, po jedna skupina podređenih čvorova, a JSON prevelik za pregled i dalje možeš preuzeti. JSX i TypeScript nisu standardni JavaScript pa ih Acorn prijavljuje kao sintaksne greške.

    Česta pitanja

    Zašto dobivam „Sintaksna greška u retku 1, stupac 1“?

    Kôd nije valjan JavaScript za odabranu vrstu izvora. Poruka navodi redak, stupac i Acornovo objašnjenje. Čest je uzrok import ili export uz odabranu Skripta (klasična), ili TypeScript anotacije i JSX, koje Acorn ne analizira.

    Koja je razlika između modula i skripte?

    Moduli su uvijek u strogom načinu, dopuštaju import, export i await na najvišoj razini, a zabranjuju with i oktalne literale. Skripte su klasični način elementa <script>. Stablo taj izbor bilježi i u svojstvu sourceType čvora Program.

    Izvršava li se kôd?

    Ne. Analiza samo pretvara tekst u strukturu podataka. Ništa se ne evaluira, nijedna se funkcija ne poziva i ne šalje se nikakav mrežni zahtjev, pa je sigurno pregledavati nepouzdan, pa čak i zlonamjeran kôd.

    Prikazuju li se komentari u stablu?

    Ne. ESTree ne pridružuje komentare čvorovima pa nisu dio stabla, ali ih i dalje možeš vidjeti u izvornom tekstu čvora u ploči Odabrani čvor.

    Koja je verzija JavaScripta podržana?

    Acorn je postavljen na najnoviju ECMAScript verziju koju poznaje, što uključuje opcionalno ulančavanje, nullish coalescing, BigInt, polja klasa i privatne metode, await na najvišoj razini, zastavice regularnih izraza poput v i drugu noviju sintaksu.

    Slični alati