Alat untuk Meminminasikan / Mengompres JavaScript [ditutup]

430

Apakah ada skrip baris perintah dan / atau alat online yang dapat membalikkan efek minifikasi mirip dengan bagaimana Tidy dapat membersihkan HTML yang mengerikan?

(Saya secara khusus ingin menghapus file JavaScript yang diperkecil, jadi penggantian nama variabel mungkin masih menjadi masalah.)

javascript code-formatting minify compression unminify Andy Ford
sumber
4
Bagi Anda yang mungkin tidak sadar, minifikasi mengubah nama variabel internal menjadi satu huruf dan menghapus komentar kode. Membatalkan perubahan ini tidak dapat otomatis.
Sungai Vivian
@DanielAllenLangdon Poin bagus. Saya telah mengedit pertanyaan sehingga tidak lagi menyiratkan bahwa minifikasi tidak mengubah nama variabel.
Andy Ford
12
FWIW ... baru saja menemukan JS NICE jsnice.org
Andy Ford
marcusjenkins.com/linux/… bekerja dengan baik untuk saya.
ychaouche
1
Untuk @DanielAllenLangdon: jsnice.org dapat menghapus dan menghapus kode 30k angularjs.
Hijau

Jawaban:

504

Anda dapat menggunakan ini: http://jsbeautifier.org/ Tapi itu tergantung pada metode minify yang Anda gunakan, ini hanya memformat kode, itu tidak mengubah nama variabel, atau pengkodean base62 uncompress.

sunting: sebenarnya ia dapat membongkar skrip "dikemas" (dikemas dengan pembungkus Dean Edward: http://dean.edwards.name/packer/ )

Fabien Ménager
sumber
2
+1 - Saya telah menggunakan metode ini sebelumnya, dan jsbeautifier.org adalah layanan yang sangat baik.
Dan Lew
Terima kasih. Inilah yang saya cari.
Andy Ford
5
Tidak, saya mengatakan basis 62: dean.edwards.name/packer dan en.wikipedia.org/wiki/Base_62
Fabien Ménager
4
apakah ada yang namanya alat yang "mengubah nama variabel" dan masih mengetahui sintaks JS untuk tidak merusak kode?
Jorge Vargas
3
akan naik ini 10 kali jika aku bisa. baru saja menyelamatkan saya dari hari yang sia-sia!
benlumley
154

Alat pengembang Chrome memiliki fitur ini bawaan. Memunculkan alat pengembang (menekan F12 adalah satu arah), pada tab Sumber, bilah kiri bawah memiliki serangkaian ikon. Ikon "{}" adalah "Cetak cantik" dan melakukan konversi ini sesuai permintaan.

PEMBARUAN: IE9 "F12 developer tools" juga memiliki fitur "Format JavaScript" di tab Script di bawah ikon Tools di sana. ( lihat Tip # 4 di F12 Rahasia debugging web terbaik disimpan )

masukkan deskripsi gambar di sini

Jon Adams
sumber
1
Untuk .js tertentu yang saya coba hapus, metode ini bekerja paling baik, tepuk tangan.
igneosaur
1
Ini sekarang di tab "Sumber", bukan tab Skrip.
mhenry1384
@ mhenry1384: Ya, Chrome mengganti nama tab. Saya memperbarui jawabannya.
Jon Adams
IYA!! (Aplikasi kami tidak memiliki mode debug / dev untuk js yang saya ketahui - syukurlah kami tidak mempersingkat / mengubah nama variabel.)
Steven Lu
2
Hanya kepala-up: Chrome terkadang mengacaukan kode JavaScript. Sebagai contoh, if (a) /regex/.match(foo);cukup dicetak sebagai if (a)\n / /regex/ .\nmatch(foo);kesalahan sintaks.
amfetamachine
56

Oke! JSBeautifier melakukan hal ini, dan Anda bahkan memiliki opsi untuk pemformatan otomatis.

Kilat
sumber
5
stackoverflow-then-google bukannya google-then-stackoverflow? :))))
dfa
Saya melakukan google untuk "javascript formatter online"
cgp
1
Plugin FireFox ini menggunakan JSBeautifier untuk membatalkan-minify javascript sehingga Anda kemudian dapat menetapkan breakpoints pada baris di debugger js FireBug !!: addons.mozilla.org/en-US/firefox/addon/javascript-deminifier
BT
16

Tidak bisakah Anda menggunakan formatter javascript ( http://javascript.about.com/library/blformat.htm )?

Janco
sumber
+1 untuk jawaban yang juga berfungsi. fabien baru saja membalas duluan
Andy Ford
Ini hanya menjawab bagian "dekompresi" dari pertanyaan.
Jorge Vargas
Tidak, ini tidak berfungsi dengan baik. Itu memecahkan kode ... :(
Ramesh
14

Di Firefox, SpiderMonkey dan Rhino Anda dapat membungkus kode apa pun menjadi fungsi anonim dan memanggil toSourcemetode tersebut, yang akan memberi Anda sumber fungsi yang diformat dengan baik.

toSource juga strip komentar.

E. g. :

(function () { /* Say hello. */ var x = 'Hello!'; print(x); }).toSource()

Akan dikonversi ke string:

function () {
    var x = "Hello!";
    print(x);
}

PS : Ini bukan "alat online", tetapi semua pertanyaan tentang teknik mempercantik umum ditutup sebagai duplikat dari yang ini.

katspaugh
sumber
Menarik. Saya mengajukan pertanyaan 2,5 tahun yang lalu jadi saya merasa sudah terlambat untuk mengedit judul, tapi saya masih suka melihat opsi online dan offline. Terima kasih telah membantu. +1
Andy Ford
10

Jika Anda memiliki Mac dan TextMate - Alternatif mudah untuk memformat Javascript adalah:

  1. Buka file dengan Textmate.
  2. Klik pada> Bundel> JavaScript> Format Ulang Dokumen
  3. Buka bir.
Batu
sumber
2
Bir dilayani sekarang :)
dgilperez
6

Sebagian besar IDE juga menawarkan fitur pemformatan otomatis. Misalnya di NetBeans, cukup tekan CTRL + K .

gou1
sumber
5

Sebagai alternatif (karena saya tidak tahu tentang jsbeautifier.org sampai sekarang), saya telah menggunakan bookmarklet yang mengaktifkan kembali tombol decode di Dean Edward's Packer.

Saya menemukan petunjuk dan bookmarklet di sini .

di sini adalah bookmarklet (jika situsnya down)

javascript:for%20(i=0;i<document.forms.length;++i)%20{for(j=0;j<document.forms[i].elements.length;++j){document.forms[i].elements[j].removeAttribute(%22readonly%22);document.forms[i].elements[j].removeAttribute(%22disabled%22);}}
Mottie
sumber
5

Mirip dengan jawaban Stone , tetapi untuk pengembang Windows / .NET:

Jika Anda memiliki Visual Studio dan ReSharper - Alternatif mudah untuk memformat Javascript adalah:

  • Buka file dengan Visual Studio;
  • Klik pada ReSharper> Tools> Cleanup Code (Ctrl + E, C);
  • Pilih "Default: Reformat code", dan klik OK;
  • Buka bir.
C. Augusto Proiete
sumber
4

Meskipun memiliki jarak yang jauh dari antarmuka yang cantik, JSPretty adalah alat yang bagus, gratis, dan online untuk membuat kode sumber javascript yang dapat dibaca oleh manusia. Anda dapat memberlakukan jenis indentasi yang Anda sukai dan juga dapat mendeteksi kebingungan.

Farshid
sumber
3

Pretty Diff akan mempercantik (cukup cetak) JavaScript dengan cara yang sesuai denganalgoritma white space JSLint dan JSHint .

austincheney
sumber
Sungguh ironis situs ini sangat tidak cantik, tetapi ini adalah alat yang keren.
Andy Ford
3

Tidak terlalu senang dengan output dari jsbeautifier.org untuk apa yang saya masukkan, jadi saya melakukan pencarian lagi dan menemukan situs ini: http://www.centralinternet.com.br/javascript-beautifier

Bekerja sangat baik untuk saya.

Doyle Lewis
sumber