Visualisator & Penjelajah AST JavaScript
Parsing dan jelajahi kode JavaScript sebagai Pohon Sintaks Abstrak interaktif. Tempel atau unggah kode JS apa pun untuk melihat struktur pohon yang diuraikan dengan jenis simpul berkode warna, cabang yang dapat diperluas, properti terperinci, dan pemfilteran jenis simpul. Sempurna untuk memahami struktur kode, menganalisis skrip yang dikaburkan, dan mempelajari cara kerja parser JavaScript.
Parse JavaScript code into an interactive Abstract Syntax Tree. Paste your code below, then explore the tree by expanding nodes and clicking to inspect properties.
Click any AST node to view its properties
Mengapa Menggunakan Visualizer AST JavaScript Kami?
- Visualisasi AST Instan: Parsing kode JavaScript apa pun dan visualisasikan Pohon Sintaks Abstraknya secara instan sebagai pohon interaktif. Tempel atau unggah kode JS dan segera lihat struktur yang diuraikan dengan jenis simpul berkode warna, cabang yang dapat diperluas, dan informasi properti terperinci untuk setiap simpul. Semua penguraian terjadi secara lokal di browser Anda.
- Analisis Kode Aman & Pribadi: Kode sumber JavaScript Anda tidak pernah meninggalkan perangkat Anda. Semua penguraian, pembuatan pohon, dan analisis AST terjadi sepenuhnya di browser Anda menggunakan JavaScript murni. Tanpa unggahan, tanpa pelacakan, tanpa pemrosesan di sisi server - privasi lengkap untuk semua kode yang Anda analisis.
- JS AST Explorer Online - Tanpa Instalasi: Gunakan visualisator JavaScript AST langsung di browser modern apa pun tanpa memerlukan unduhan, aplikasi, atau plugin. Bekerja offline setelah pemuatan pertama dan menangani berbagai ukuran input JavaScript. 100% gratis selamanya tanpa perlu mendaftar.
- Navigasi & Pemfilteran Pohon Interaktif: Menavigasi pohon AST kompleks dengan node yang dapat diperluas/diciutkan, mencari berdasarkan jenis node, dan melihat properti terperinci untuk setiap node yang dipilih. Tipe node berkode warna memudahkan untuk mengidentifikasi deklarasi fungsi, deklarasi variabel, ekspresi, dan lainnya secara sekilas.
Kasus Penggunaan Umum untuk JavaScript AST Visualizer
- Analisis Kode Sumber JavaScript: Pengembang menggunakan visualisator AST untuk memahami struktur kode sumber JavaScript dengan melihat representasi pohon yang diurai. Lihat bagaimana parser menafsirkan kode Anda, identifikasi konstruksi ambigu, dan verifikasi bahwa struktur kode Anda sesuai dengan maksud Anda.
- Rekayasa Pembalikan Kode yang Dikaburkan: Peneliti keamanan dan insinyur balik menggunakan visualisator AST untuk menganalisis kode JavaScript yang dikaburkan. Dengan melihat struktur pohon yang diurai, pola tersembunyi, string yang dikodekan, dan modifikasi aliran kontrol menjadi terlihat bahkan ketika kode sumber sengaja dikaburkan.
- Pendidikan & Pembelajaran Pemrograman: Siswa dan pendidik menggunakan visualisator JavaScript AST untuk mempelajari bagaimana parser JavaScript menafsirkan kode. Representasi pohon visual membuat konsep abstrak seperti pengangkatan, cakupan, dan evaluasi ekspresi menjadi nyata dengan menunjukkan secara tepat bagaimana parser menyusun setiap konstruksi.
- Linting Kode & Verifikasi Sintaks: Insinyur jaminan kualitas menggunakan visualisator AST untuk memverifikasi bahwa kode valid secara sintaksis dan terstruktur seperti yang diharapkan. Pohon yang diurai mengungkapkan kesalahan sintaksis, penyarangan yang tidak terduga, dan masalah struktural yang mungkin terlewatkan saat membaca kode sumber secara langsung.
- Transformasi Kode & Pengembangan Alat: Pengembang yang membuat alat transformasi kode, linter, atau minifier menggunakan visualisator AST untuk memahami bagaimana kode target mereka akan diurai. Lihat jenis, posisi, dan properti node yang dihasilkan oleh parser untuk menulis logika transformasi yang akurat.
- Audit Keamanan & Analisis Kerentanan: Auditor keamanan menggunakan visualisator JavaScript AST untuk menganalisis kode yang berpotensi berbahaya. Pohon yang diurai mengungkapkan panggilan eval(), akses properti dinamis, konstruksi fungsi yang mencurigakan, dan pola lain yang mungkin mengindikasikan upaya injeksi kode atau kebingungan.
Apa itu Pohon Sintaks Abstrak JavaScript (AST)?
Pohon Sintaks Abstrak (AST) adalah representasi pohon dari struktur sintaksis kode sumber JavaScript. Setiap node di pohon mewakili konstruksi yang terjadi dalam kode sumber - seperti deklarasi fungsi, deklarasi variabel, ekspresi biner, atau pernyataan if. Struktur pohon menangkap hubungan hierarki antara konstruksi ini, menunjukkan node mana yang merupakan anak dari konstruksi lainnya.
AST adalah dasar bagi sebagian besar alat analisis kode - kompiler, linter (ESLint), pemformat (Prettier), minifier (Terser), dan obfuscator, semuanya bekerja dengan menguraikan kode sumber menjadi AST, mengubahnya, dan menghasilkan kode baru dari pohon yang dimodifikasi. Visualisator JavaScript AST kami membuat representasi internal ini terlihat dan dapat dieksplorasi, membantu Anda memahami dengan tepat bagaimana parser menafsirkan struktur kode Anda.
Cara Kerja Visualisator AST JavaScript Kami
- 1. Analisis Leksikal (Tokenisasi): Alat ini pertama-tama memecah kode sumber JavaScript Anda menjadi token - unit terkecil yang bermakna seperti kata kunci (fungsi, konstanta, jika), pengidentifikasi (nama variabel dan fungsi), operator (+, =, =>), dan tanda baca ((, {',;). Setiap token ditandai dengan jenis dan posisinya di sumber.
- 2. Parsing Sintaksis: Aliran token kemudian diurai sesuai dengan aturan tata bahasa JavaScript untuk membangun Pohon Sintaks Abstrak. Parser mengenali konstruksi bahasa seperti deklarasi fungsi, definisi kelas, deklarasi variabel, loop, kondisional, dan ekspresi, mengaturnya ke dalam struktur pohon hierarki di mana node induk berisi node anak yang mewakili bagian-bagian penyusunnya.
- 3. Rendering & Interaksi Pohon: AST yang diurai dirender sebagai pohon interaktif yang dapat dilipat. Setiap node diberi kode warna berdasarkan kategori tipenya (deklarasi, pernyataan, ekspresi, pola), dan mengklik sebuah node akan menampilkan properti detailnya termasuk tipe, posisi (baris/kolom), dan referensi anak. Anda dapat memperluas dan menciutkan cabang, mencari berdasarkan jenis simpul, dan menjelajahi struktur pohon secara keseluruhan.
Jenis & Kategori Node AST Utama
- Program: Node akar yang mewakili seluruh file JavaScript. Berisi array body dengan semua pernyataan tingkat atas, termasuk impor, deklarasi fungsi, deklarasi kelas, dan deklarasi variabel.
- Deklarasi: Node yang mewakili konstruksi bernama - FunctionDeclaration (fungsi dengan nama, param, isi), VariableDeclaration (const/let/var dengan deklarator), ClassDeclaration (kelas dengan isi, superClass), ImportDeclaration dan EksporDeclaration.
- Pernyataan: Node yang mewakili pernyataan yang dapat dieksekusi - ExpressionStatement, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, SwitchStatement, dan banyak lagi.
- Ekspresi: Node yang mewakili nilai dan operasi - BinaryExpression (a + b), CallExpression (foo()), MemberExpression (a.b), ArrowFunctionExpression, ArrayExpression, ObjectExpression, Literal, Identifier, dan TemplateLiteral.
Menggunakan AST Explorer untuk Analisis Kode
Visualisator JavaScript AST adalah alat penting bagi siapa pun yang bekerja dengan analisis kode, transformasi, atau kebingungan. Saat menganalisis kode yang dikaburkan, AST mengungkapkan pola struktural yang tersembunyi di sumber - string yang dikodekan muncul sebagai node CallExpression dengan pola argumen tertentu, perataan aliran kontrol ditampilkan sebagai pembungkus SwitchStatement atau WhileStatement, dan injeksi kode mati muncul sebagai cabang yang tidak dapat dijangkau di pohon.
Untuk tujuan pembelajaran, visualisator AST membantu menjembatani kesenjangan antara cara Anda menulis kode dan cara parser menafsirkannya. Bereksperimenlah dengan konstruksi JavaScript yang berbeda untuk melihat bagaimana konstruksi tersebut dipetakan ke node pohon - Anda akan melihat bagaimana fungsi panah vs fungsi reguler menghasilkan struktur AST yang berbeda, atau bagaimana destrukturisasi menciptakan node pola bersarang. Semua pemrosesan dilakukan secara lokal di browser Anda tanpa data dikirim ke server eksternal.
Pertanyaan yang Sering Diajukan
Visualisator JavaScript AST adalah alat yang mem-parsing kode sumber JavaScript dan menampilkan Pohon Sintaks Abstrak (AST) sebagai struktur pohon yang interaktif dan dapat dinavigasi. Ini menunjukkan bagaimana parser menafsirkan kode Anda, memecahnya menjadi node yang mewakili deklarasi fungsi, deklarasi variabel, ekspresi, pernyataan, dan konstruksi lainnya, dengan properti terperinci dan informasi posisi untuk setiap node.
Visualisator JavaScript AST kami menggunakan parser khusus yang mengikuti tata bahasa spesifikasi ECMAScript dengan cermat. Ini menangani fitur JavaScript modern termasuk fungsi panah, literal templat, destrukturisasi, async/menunggu, kelas, modul, dan sintaksis ES6+. Meskipun mungkin tidak mencakup setiap kasus edge dari spesifikasi ECMAScript lengkap, ini secara akurat mengurai sebagian besar kode JavaScript dunia nyata yang akan Anda temui.
Sangat. Semua penguraian dan pembuatan AST terjadi sepenuhnya di browser Anda menggunakan JavaScript murni. Kode sumber Anda, baik itu algoritme kepemilikan, skrip yang dikaburkan, atau logika bisnis sensitif, tidak akan pernah meninggalkan perangkat Anda. Tidak ada data yang diunggah ke server mana pun, dan tidak ada pelacakan atau penyimpanan kode apa pun yang Anda analisis.
Ya, visualisator AST adalah alat yang berharga untuk merekayasa balik JavaScript yang dikaburkan. Dengan melihat struktur pohon yang diurai, Anda dapat mengidentifikasi pola kebingungan seperti perataan aliran kontrol (beralih pernyataan dengan operator), muatan string yang dikodekan (ekspresi panggilan dengan pola argumen tertentu), injeksi kode mati (cabang yang tidak dapat dijangkau), dan penggantian string berbasis array. Pohon visual membuat pola-pola ini lebih mudah dikenali daripada membaca sumbernya secara langsung.
Penjelajah AST mendukung lebih dari 30 jenis node yang mencakup seluruh sintaks JavaScript. Ini termasuk Program, FunctionDeclaration, VariableDeclaration, ClassDeclaration, ImportDeclaration, ExportDeclaration, IfStatement, ForStatement, WhileStatement, ReturnStatement, TryStatement, BinaryExpression, CallExpression, MemberExpression, ArrowFunctionExpression, ArrayExpression, ObjectExpression, TemplateLiteral, Literal, Identifier, dan masih banyak lagi. Setiap jenis node memiliki warna berbeda pada pohon untuk memudahkan identifikasi.
Setiap node AST menampilkan tipenya (jenis konstruksi), posisi (garis/kolom awal dan akhir di sumber), dan properti tipe spesifiknya. Misalnya, simpul FunctionDeclaration memperlihatkan nama fungsi, larik params, dan referensi isi. BinaryExpression menunjukkan operator dan operan kiri/kanan. Literal menunjukkan nilai mentah dan nilai yang diurai. Properti ini mewakili informasi persis yang akan digunakan kompiler atau transformator saat memproses kode.
Visualisator AST dirancang terutama untuk JavaScript standar (ES2015/ES6+). Meskipun menangani sebagian besar fitur JavaScript modern, sintaks khusus TypeScript (anotasi tipe, antarmuka, enum) dan sintaksis JSX mungkin tidak diuraikan dengan benar. Untuk analisis TypeScript atau JSX, hapus anotasi tipe dan tag JSX sebelum penguraian, atau gunakan penjelajah AST khusus TypeScript.
Penampil pohon menyediakan node yang dapat diciutkan sehingga Anda hanya dapat memperluas cabang yang Anda minati. Anda juga dapat memfilter node berdasarkan tipe menggunakan input pencarian/filter - ketikkan nama tipe node seperti FunctionDeclaration atau VariableDeclaration untuk menyorot node yang cocok. Pohon-pohon besar secara otomatis dapat dikelola melalui pengungkapan progresif - mulai dengan memperluas isi tingkat atas, lalu menelusuri deklarasi dan ekspresi tertentu.
Ya, visualisator JavaScript AST kami 100% gratis tanpa biaya atau batasan tersembunyi. Tidak perlu mendaftar, tidak ada tingkat premium, tidak ada batasan penggunaan, tidak ada batasan ukuran file, dan tidak ada iklan. Gunakan tanpa batas waktu untuk proyek pribadi atau komersial apa pun. Semua penguraian dan visualisasi terjadi secara lokal di browser Anda.