Uraikan minifikasi JavaScript online
Tempel file .js yang diminifikasi, bundle webpack, atau cuplikan satu baris untuk mendapatkan JavaScript dengan indentasi rapi di panel kanan. Prettier memformatnya di browser Anda tanpa mengunggah apa pun.
Mengapa JavaScript menjadi sulit dibaca
Setiap alur build modern meminifikasi JavaScript sebelum mendistribusikannya. Terser, esbuild, SWC, dan alat sejenis membuang spasi serta komentar, mengganti nama variabel dan fungsi lokal menjadi satu huruf, memadatkan blok bersarang menjadi rangkaian ekspresi, lalu menggabungkan seluruh aplikasi ke dalam satu atau dua file. Aplikasi React yang semula terdiri dari tiga ratus file sumber yang mudah dibaca tiba di browser sebagai satu baris sepanjang ratusan kilobita. Kodenya tetap berjalan dengan baik, tetapi saat perlu dibaca, Anda menghadapi dinding teks tanpa struktur yang dapat dijadikan pegangan.
Apa yang dipulihkan oleh pemformatan
Merapikan bundle mengembalikan hal-hal yang membuat kode mudah ditelusuri. Pernyataan kembali berada di baris masing-masing, sehingga stack trace yang menunjuk baris 1 kolom 24815 dapat dikaitkan dengan lokasi yang jelas. Susunan bersarang terlihat, sehingga Anda dapat mengetahui awal dan akhir fungsi, cabang yang dijaga suatu kondisi, serta cara rangkaian callback disusun. String, URL, dan nama endpoint mudah dipindai, yang biasanya menjadi tujuan utama saat mengaudit skrip pihak lain.
Sintaks modern didukung
Pemformat mengurai JavaScript masa kini, bukan sekadar sebagian sintaks dari sepuluh tahun lalu. Arrow function, class, async dan await, generator, optional chaining, nullish coalescing, template literal, destructuring, sintaks spread, impor dinamis, dan modul ES semuanya dapat diformat. JSX juga didukung, yang berguna saat memeriksa komponen React yang dikompilasi tanpa mengubah JSX menjadi bentuk lain. Karena dikerjakan oleh Prettier, hasilnya mengikuti konvensi yang biasa diterapkan editor pada file Anda sendiri.
Batas kemampuan alat ini
Menguraikan minifikasi bukan rekayasa balik. Alat minifikasi telah menghapus komentar dan mengganti nama variabel, dan tidak ada pemformat yang dapat menebak bahwa variabel bernama n sebelumnya bernama remainingRetries. Jika proyek menyediakan source map, muatlah di DevTools browser karena itulah satu-satunya jalan kembali ke sumber asli. Jika file sengaja diobfuskasi, bukan sekadar diminifikasi, strukturnya akan mudah dibaca tetapi maksud kodenya belum tentu menjadi jelas.
Pertanyaan yang sering diajukan
Bisakah alat ini menguraikan minifikasi bundle webpack atau Vite?
Ya. Tempel bundle atau buka filenya melalui Pilih file, dan isinya akan diformat seperti file JavaScript lainnya. Bundle besar memerlukan beberapa detik karena pemrosesan berlangsung di perangkat Anda sendiri. Struktur modul kembali terlihat setelah kode diberi indentasi.
Apakah alat ini membatalkan obfuskasi JavaScript?
Alat ini memformat kode yang diobfuskasi agar jauh lebih mudah dibaca, tetapi tidak membatalkan obfuskasinya. String tersandi, alur kontrol buatan, dan kode mati yang sengaja disisipkan tetap berada di tempatnya.
Apakah pemformatan dapat merusak kode saya?
Pemformat berupaya mempertahankan perilaku program, tetapi dapat mengubah lebih dari sekadar spasi: tanda kutip, titik koma, atau tanda kurung dapat berubah sesuai aturan yang diterapkan. Simpan versi asli dan tinjau hasilnya. Jika hendak menjalankan versi yang diformat atau memasukkannya ke proyek, lakukan pemeriksaan yang biasa Anda jalankan untuk proyek tersebut.