JavaScript Beautifier – JS-Code online formatieren

JS input

Indent

Share X / Twitter Facebook LinkedIn WhatsApp

So verwenden Sie JavaScript-Verschönerer

Fügen Sie das JavaScript ein – ein minimiertes Bundle, ein Inline-Skript oder eine unordentliche Quelle.
Lesen Sie die formatierte Ausgabe – Anweisungen getrennt, Blöcke eingerückt, Fluss sichtbar.
Erwarten Sie kurze Variablennamen im Produktionscode – durch die Minimierung werden sie dauerhaft umbenannt; Die Struktur erzählt immer noch die Geschichte.
Zum Debuggen von Live-Sites erledigt {} Pretty-Print von DevTools dies mit Haltepunkten – verwenden Sie beides.

Was ist JavaScript-Verschönerer?

Ein JavaScript-Verschönerer formatiert Code in eine lesbare Struktur um: Anweisungen in eigenen Zeilen, Blöcke eingerückt, Operatoren mit Abständen – und verwandelt die einzelne Zeile mit 80.000 Zeichen eines minimierten Bündels in Code, dem ein Mensch folgen kann. Die Logik bleibt unberührt; Es wird nur die Formatierung zurückgegeben.

Der ehrliche Vorbehalt vorweg: Durch die Verschönerung wird das Entfernen von Leerzeichen bei der Minimierung rückgängig gemacht, aber nicht das Umbenennen von Variablen – die Funktion a(b,c){return b+c des Produktionspakets verschönert sie in eine lesbare Struktur mit unlesbaren Namen. Struktur und Kontext reichen normalerweise aus, um der Logik zu folgen. Originalnamen benötigen Quellkarten.

Über den JavaScript-Verschönerer

Fügen Sie minimiertes oder unordentliches JavaScript ein und erhalten Sie eine eingerückte, strukturierte Ausgabe – lesbar genug zum Debuggen, Lernen oder Prüfen.

Warum Menschen JS verschönern: Debuggen eines Produktionsfehlers, dessen Stack-Trace auf ein minimiertes Paket verweist (verschönern, die Zeile finden, begründen), verstehen, was ein Drittanbieter-Skript tatsächlich tut, bevor es ihm auf einer Seite vertraut (Analyse-Snippets, Anzeigen-Tags, das Widget-Marketing möchte), die Frontend-Logik einer Website untersuchen Neugier oder Recherche und Neuformatierung von Legacy-Code, der geschrieben wurde, bevor Prettier den Stil aller standardisierte.

Wissenswerte Alternative im Browser: Die Pretty-Print-Schaltfläche ({}) von DevTools erledigt dies im Debugger mit angehängten Haltepunkten. Zur Codeüberprüfung, zum Teilen oder zum Offline-Lesen stellt Ihnen ein Verschönerer den Text selbst zur Verfügung. Der umgekehrte Weg ist der JavaScript-Minifier; Informationen zu absichtlich verschlüsseltem (nicht nur minimiertem) Code finden Sie im Deobfuscator.

Häufig gestellte Fragen

Nein – Minifier haben sie irreversibel umbenannt (Daten → a). Durch die Verschönerung wird nur die Struktur wiederhergestellt. Ursprüngliche Namen leben in Quellkarten, die Produktionsstandorte normalerweise nicht versenden.

Verschönern Sie das Bundle (oder klicken Sie im Bedienfeld „Quellen“ von DevTools auf {}), suchen Sie den fehlerhaften Ausdruck über den Zeichenoffset des Stack-Trace und lesen Sie die umgebende Logik. Quellkarten, sofern verfügbar, überspringen Sie dies alles.

Ja – Verschönern ist Texttransformation; nichts wird ausgeführt. Genau so beginnen Analysten, potenziell bösartiges JS zu lesen. (Die tatsächliche Ausführung des Codes ist eine völlig andere Entscheidung.)

Build-Pipelines haben es verändert: JSX wegkompiliert, asynchron neu geschrieben, Module gebündelt, Helfer eingefügt. Sie lesen den Dialekt der Maschine, nicht die Quelle des Entwicklers – die Struktur ist treu, die Redewendung jedoch nicht.

Prettier (oder ähnlich) gehört in die Toolchain Ihres Projekts und formatiert beim Speichern Ihre eigene Quelle. Ein Paste-In-Verschönerer ist für Code außerhalb Ihrer Toolchain gedacht – Skripte anderer Leute, Produktionspakete, schnelle Einzelstücke.