Utilia
Kategorije ▾
Jezik: bs ▾

Istraživač JavaScript AST-a

Zalijepi JavaScript i istraži njegovo apstraktno sintaksno stablo (ESTree, Acorn) u pregledniku. Klikni čvorove i izvezi AST kao JSON.

Vrsta izvora
Čvorovi
–
Najveća dubina
–
Naredbe na najvišem nivou
–
Sintaksno stablo

Klikni na čvor da označiš njegov kod. Klikni ili pomjeri kursor u kodu da pronađeš njegov čvor.

    Odabrani čvor

    Odaberi čvor u stablu ili klikni u kodu.

    ESTree JSON

    Kako istražiti AST JavaScript koda

    1. Zalijepi svoj kod u polje JavaScript kod ili klikni Učitaj primjer da počneš od malog modula.
    2. Odaberi Vrstu izvora: Modul (import/export, strogi način) za ES module ili Skripta (klasična) za obične skripte koje mogu koristiti zastarjele mogućnosti, poput naredbe with.
    3. Stablo se osvježi trenutak nakon što prestaneš tipkati. Klikni Analiziraj da ga pokreneš odmah.
    4. U Sintaksnom stablu klikni malu strelicu da proširiš ili skupiš čvor. Klik na naziv čvora označava odgovarajući kod u uređivaču, a panel Odabrani čvor prikazuje njegov tip, svojstvo kojem pripada, raspon znakova, red i kolonu, jednostavna svojstva (naziv, operator, izvornu vrijednost…) i njegov izvorni tekst.
    5. Radi i obrnuto: klikni bilo gdje u kodu, pomjeri kursor tastaturom ili označi dio koda, pa će se najdublji čvor koji ga obuhvata proširiti i istaknuti u stablu.
    6. Otvori ESTree JSON da vidiš cijelo stablo kao JSON, sa ili bez opcije Uključi pozicije (start, end, loc), pa ga Kopiraj ili Preuzmi JSON.

    Brojači prikazuju broj čvorova, najveću dubinu stabla i broj naredbi na najvišem nivou.

    Šta je apstraktno sintaksno stablo?

    Prije nego što JavaScript mašina, linter ili bundler išta uradi s tvojim kodom, tekst se parsira u stablo čvorova. Svaki čvor ima type (VariableDeclaration, CallExpression, Identifier…) i podčvorove smještene u imenovana svojstva. Za total += size; dobiješ ExpressionStatement čiji je expression jedan AssignmentExpression s operatorom +=, lijevim identifikatorom total i desnim identifikatorom size. Zagrade, tačke sa zarezom i komentari nestaju: stablo čuva samo strukturu koja je važna, pa se zato 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 koji razumije većina alata za transformaciju koda. Poznavanje tačnih tipova čvorova je ključno kad pišeš ESLint pravilo, Babel ili jscodeshift codemod, Prettier dodatak ili bilo koju skriptu za analizu koda.

    Pozicije, rasponi i izvoz u JSON

    Svaki čvor nosi start i end, pomake prvog i posljednjeg (plus jedan) znaka u izvornom kodu, te objekat loc s redovima (od 1) i kolonama. U JSON-u kolone počinju od 0, kao u izlazu Acorna, dok ih panel Odabrani čvor prikazuje od 1, kao većina uređivača. Isključi Uključi pozicije (start, end, loc) da dobiješ lakši JSON koji je jednostavnije porediti između dvije verzije koda.

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

    Ograničenja i privatnost

    Kod se parsira u tvom pregledniku i nikada se ne izvršava niti šalje bilo kuda: parser samo čita tekst. Ulaz je ograničen na milion znakova. Vrlo velika stabla iscrtavaju se na zahtjev, po grupa podčvorova, a JSON koji je prevelik za prikaz i dalje možeš preuzeti. JSX i TypeScript nisu standardni JavaScript, pa ih Acorn prijavljuje kao sintaksne greške.

    Česta pitanja

    Zašto dobijam „Sintaksna greška u redu 1, koloni 1“?

    Kod nije ispravan JavaScript za odabranu vrstu izvora. Poruka navodi red, kolonu i Acornovo objašnjenje. Čest uzrok je import ili export uz odabranu Skriptu (klasičnu), ili TypeScript anotacije i JSX, koje Acorn ne parsira.

    Koja je razlika između modula i skripte?

    Moduli su uvijek u strogom načinu, dozvoljavaju import, export i await na najvišem nivou, a zabranjuju with i oktalne literale. Skripte su klasični <script> način. Odabir se bilježi i u svojstvu sourceType čvora Program.

    Da li se kod izvršava?

    Ne. Parsiranje samo pretvara tekst u strukturu podataka. Ništa se ne evaluira, nijedna funkcija se ne poziva i ne šalje se nijedan mrežni zahtjev, pa je sigurno pregledati i nepouzdan ili čak zlonamjeran kod.

    Prikazuju li se komentari u stablu?

    Ne. ESTree ne vezuje komentare za čvorove, pa nisu dio stabla, ali ih i dalje možeš vidjeti u izvornom tekstu čvora u panelu Odabrani čvor.

    Koja verzija JavaScripta je podržana?

    Acorn je podešen na najnoviju verziju ECMAScripta koju poznaje, što uključuje opcionalno ulančavanje, nullish coalescing, BigInt, polja klasa i privatne metode, await na najvišem nivou, zastavice regularnih izraza poput v i drugu noviju sintaksu.

    Srodni alati