Tool zum Aufheben / Dekomprimieren von JavaScript [geschlossen]

430

Gibt es Befehlszeilenskripte und / oder Online-Tools, die die Auswirkungen der Minimierung umkehren können, ähnlich wie Tidy schreckliches HTML bereinigen kann?

(Ich möchte speziell die Minimierung einer minimierten JavaScript-Datei aufheben, sodass das Umbenennen von Variablen möglicherweise immer noch ein Problem darstellt.)

Andy Ford
quelle
4
Für diejenigen unter Ihnen, die sich dessen möglicherweise nicht bewusst sind, ändert die Minimierung die internen Variablennamen in einen einzelnen Buchstaben und entfernt Codekommentare. Das Rückgängigmachen dieser Änderungen kann nicht automatisiert werden.
Vivian River
@ DanielAllenLangdon Guter Punkt. Ich habe die Frage so bearbeitet, dass sie nicht mehr bedeutet, dass durch die Minimierung die Variablennamen nicht geändert werden.
Andy Ford
12
FWIW ... habe gerade JS NICE jsnice.org gefunden
Andy Ford
marcusjenkins.com/linux/… hat bei mir gut funktioniert.
Ychaouche
1
Für @DanielAllenLangdon: jsnice.org kann sogar 30k AngularJS-Code aufheben und verschleiern.
Grün

Antworten:

504

Sie können dies verwenden: http://jsbeautifier.org/ Dies hängt jedoch von der verwendeten Minify-Methode ab. Diese Methode formatiert nur den Code, ändert weder Variablennamen noch dekomprimiert die Base62-Codierung.

edit: Tatsächlich kann es "gepackte" Skripte entpacken (gepackt mit Dean Edwards Packer: http://dean.edwards.name/packer/ )

Fabien Ménager
quelle
2
+1 - Ich habe diese Methode schon einmal verwendet und jsbeautifier.org ist ein ausgezeichneter Service.
Dan Lew
Vielen Dank. Genau das habe ich gesucht.
Andy Ford
5
Nein, ich sagte Basis 62: dean.edwards.name/packer und en.wikipedia.org/wiki/Base_62
Fabien Ménager
4
Gibt es ein Tool, das "Variablennamen ändert" und sich dennoch der JS-Syntax bewusst ist, um den Code nicht zu beschädigen?
Jorge Vargas
3
würde dies 10 mal erhöhen, wenn ich könnte. habe mich gerade vor einem verschwendeten Tag gerettet!
Benlumley
154

In den Chrome-Entwicklertools ist diese Funktion integriert. Rufen Sie die Entwicklertools auf (F12 ist eine Möglichkeit). Auf der Registerkarte Quellen befinden sich in der unteren linken Leiste eine Reihe von Symbolen. Das Symbol "{}" ist "Hübscher Druck" und führt diese Konvertierung bei Bedarf durch.

UPDATE: IE9 "F12 Developer Tools" verfügt auch über eine Funktion zum Formatieren von JavaScript auf der Registerkarte "Skript" unter dem dortigen Symbol "Tools". ( siehe Tipp 4 in F12 Das bestgehütete Web-Debugging-Geheimnis )

Geben Sie hier die Bildbeschreibung ein

Jon Adams
quelle
1
Für die speziellen .js, die ich zu minimieren versuchte, funktionierte diese Methode am besten, Prost.
Igneosaurier
1
Dies befindet sich jetzt auf der Registerkarte "Quellen" und nicht mehr auf der Registerkarte "Skripte".
Mhenry1384
@ mhenry1384: Ja, Chrome hat den Tab umbenannt. Ich habe die Antwort entsprechend aktualisiert.
Jon Adams
JA!! (Unsere App hat keinen mir bekannten Debug / Dev-Modus für js - wir verkürzen / transformieren Variablennamen zum Glück nicht.)
Steven Lu
2
Nur ein Heads-up: Chrome bringt manchmal den JavaScript-Code durcheinander. Zum Beispiel if (a) /regex/.match(foo);ist ziemlich gedruckt, if (a)\n / /regex/ .\nmatch(foo);was ein Syntaxfehler ist.
Amphetamachine
56

Ich habs! JSBeautifier macht genau das und Sie haben sogar Optionen für die automatische Formatierung.

Der Blitz
quelle
5
Stackoverflow-dann-Google statt Google-dann-Stackoverflow? :))))
dfa
Ich habe die Google für "Javascript Formatierer online"
CGP
1
Dieses FireFox-Plugin verwendet JSBeautifier, um die Minimierung von Javascript aufzuheben, sodass Sie dann Haltepunkte in Zeilen im js-Debugger von FireBug setzen können !!: addons.mozilla.org/en-US/firefox/addon/javascript-deminifier
BT
16

Können Sie nicht einfach einen Javascript-Formatierer verwenden ( http://javascript.about.com/library/blformat.htm )?

Janco
quelle
+1 für eine Antwort, die auch funktioniert. Fabien antwortete gerade zuerst
Andy Ford
Dies beantwortet nur den "Dekomprimierungs" -Teil der Frage.
Jorge Vargas
Nein, das funktioniert nicht gut. Es bricht den Code ... :(
Ramesh
14

In Firefox, SpiderMonkey und Rhino können Sie jeden Code in eine anonyme Funktion einbinden und deren toSourceMethode aufrufen , wodurch Sie eine gut formatierte Quelle der Funktion erhalten.

toSource entfernt auch Kommentare.

Z.B. ::

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

Wird in eine Zeichenfolge konvertiert:

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

PS : Es ist kein "Online-Tool", aber alle Fragen zu allgemeinen Verschönerungstechniken werden als Duplikate dieses Tools geschlossen.

katspaugh
quelle
Interessant. Ich habe die Frage vor 2,5 Jahren gestellt, daher denke ich, dass es zu spät ist, den Titel zu bearbeiten, aber ich mag es immer noch, sowohl Online- als auch Offline-Optionen zu sehen. Vielen Dank für Ihre Teilnahme. +1
Andy Ford
10

Wenn Sie einen Mac und TextMate haben - Eine einfache Alternative zum Formatieren von Javascript ist:

  1. Öffnen Sie die Datei mit Textmate.
  2. Klicken Sie auf> Bundles> JavaScript> Dokument neu formatieren
  3. Mach ein Bier auf.
Stein
quelle
2
Bier wird gerade serviert :)
dgilperez
6

Die meisten IDEs bieten auch Funktionen zur automatischen Formatierung. Zum Beispiel in NetBeans, drücken Sie einfach STRG + K .

gou1
quelle
5

Als Alternative (da ich bis jetzt nichts über jsbeautifier.org wusste) habe ich ein Lesezeichen verwendet, das die Dekodierungsschaltfläche in Dean Edwards Packer wieder aktiviert hat.

Ich habe die Anleitung und das Lesezeichen hier gefunden .

Hier ist das Lesezeichen (falls die Website nicht verfügbar ist)

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
quelle
5

Ähnlich wie Stones Antwort, jedoch für Windows / .NET-Entwickler:

Wenn Sie über Visual Studio und ReSharper verfügen - Eine einfache Alternative zum Formatieren von Javascript ist:

  • Öffnen Sie die Datei mit Visual Studio.
  • Klicken Sie auf ReSharper> Extras> Bereinigungscode (Strg + E, C).
  • Wählen Sie "Standard: Code neu formatieren" und klicken Sie auf OK.
  • Mach ein Bier auf.
C. Augusto Proiete
quelle
4

Trotz seiner meilenweit entfernten Benutzeroberfläche ist JSPretty ein gutes, kostenloses und Online-Tool, mit dem Javascript-Quellcodes für Menschen lesbar gemacht werden können. Sie können Ihre bevorzugte Art der Einrückung erzwingen und auch die Verschleierung erkennen.

Farshid
quelle
3

Ziemlich Diff wird verschönern (ziemlich drucken) JavaScript in einer Weisedass Konform JSLint und JSHint Leerraum Algorithmen.

austincheney
quelle
Es ist ironisch, dass die Seite so unschön ist, aber das ist ein cooles Tool.
Andy Ford
3

War nicht wirklich zufrieden mit der Ausgabe von jsbeautifier.org für das, was ich eingegeben habe, also habe ich weiter gesucht und diese Seite gefunden: http://www.centralinternet.com.br/javascript-beautifier

Hat sehr gut für mich funktioniert.

Doyle Lewis
quelle