Beautify

Zurück zur Übersicht: Beautify · Tool live öffnen: www.jpkc.com/tools/beautify/

Dieses Manual beschreibt Beautify vollständig: was beim Formatieren passiert, was jede einzelne Option bewirkt, wie das Entpacken funktioniert und welche Grenzen gelten. Die Oberfläche des Tools ist auf Englisch — die Options- und Button-Bezeichnungen werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Eingabe und Ablauf

Beautify ist ein Ein-Feld-Werkzeug: Links liegen die Optionen, rechts der Code-Editor. Du arbeitest immer im selben Editor — die formatierte Ausgabe ersetzt deine Eingabe an Ort und Stelle. Der Ablauf:

Code einfügen — direkt in den Editor tippen/einfügen oder über Upload eine Datei laden. Solange der Editor leer ist, zeigt er den Hinweis „Paste your code here (JavaScript, JSON, CSS or HTML), then click Beautify or press Ctrl+Enter."
Optional Sprache und Optionen wählen — standardmäßig erkennt das Tool die Sprache automatisch.
Beautify klicken (Werkzeugleiste oder Fußzeile) oder Strg+Enter drücken.
Ergebnis übernehmen — per Copy in die Zwischenablage oder per Download als Datei.

Die Formatierung ist im Code-Editor ein eigener Undo-Schritt: Drückst du direkt danach Strg+Z, steht wieder exakt der unformatierte Code im Editor — auch dann, wenn du ihn unmittelbar vorher eingefügt hast.

Eine Besonderheit: Sobald du eines der fünf Dropdowns im Block Formatting änderst, formatiert das Tool automatisch neu. Das gilt nicht für die Checkboxen im Block Options und nicht für die Sprachwahl — nach diesen Änderungen klickst du einmal auf Beautify (oder drückst Strg+Enter).

Das gesamte Formatieren und Entpacken läuft clientseitig im Browser (siehe Architektur und Datenschutz). Zugrunde liegt die Bibliothek js-beautify (JavaScript, CSS, HTML) von Einar Lielmanis und Mitwirkenden; der Editor ist ACE im Dracula-Farbschema.

Sprache wählen oder erkennen lassen

Über das Sprach-Dropdown in der Werkzeugleiste legst du fest, als welche Sprache der Code formatiert wird:

Auto-detect (Standard) — das Tool rät die Sprache aus dem Anfang des Inhalts (führende Leerzeichen und ein Byte Order Mark zählen nicht). Die Prüfung läuft in dieser Reihenfolge:
1. Beginnt der Text mit < (aber nicht mit dem HTML-Kommentar <!--), gilt er als HTML — das schließt XML und SVG ein.
2. Beginnt er mit { oder [ und ist gültiges JSON, geht er an den JavaScript-Formatierer.
3. Eindeutige JavaScript-Anfänge ergeben JavaScript: ein //-Kommentar, ein Kommentar wie /* eslint …, /* global … oder /* jshint …, Schlüsselwörter wie function, var, let, const, if, for, class, import, export, async oder return, eine öffnende runde Klammer, $( bzw. jQuery sowie ein Name mit Zuweisung oder Aufruf (x = …, init(…) — damit auch JSONP wie callback({…})).
4. Eine CSS-At-Regel am Anfang ergibt CSS: @import, @media, @charset, @font-face, @keyframes, @supports, @layer, @page, @namespace, @container, @property oder @tailwind.
5. CSS ist es auch, wenn der Text mit einem Selektor und einem Block aus eigenschaft: wert-Deklarationen beginnt. Runde Klammern oder = im Selektor schließen CSS aus (außer in Pseudoklassen wie :not(…) und Attribut-Selektoren […]), ebenso ein Selektor, der auf : endet (ein JavaScript-Label).
6. Alles andere gilt als JavaScript.
JavaScript — erzwingt den JS-Formatierer (auch für JSON/JSONP geeignet).
CSS — erzwingt den CSS-Formatierer.
HTML — erzwingt den HTML-Formatierer.

Erkennt die Automatik falsch (etwa weil ein CSS-Fragment mitten in einem Regelblock beginnt oder ein HTML-Schnipsel mit <!--), setz die Sprache von Hand. Die Wahl steuert außerdem das Syntax-Highlighting des Editors und die Dateiendung beim Download. Das Tool merkt sich eine im Dropdown gewählte Sprache über ein Neuladen hinweg; eine feste Wahl gilt also auch für den nächsten Code, bis du wieder auf Auto-detect stellst. Beim Upload setzt das Tool die Sprache anhand der Dateiendung fest. Diese Wahl gilt nur bis zum Neuladen: Gespeichert wird sie nicht, es sei denn, du änderst danach noch eine Option.

Die Formatierungs-Optionen

Diese fünf Dropdowns im Karten-Block Formatting steuern das grundlegende Layout. Jede Änderung formatiert den Editor-Inhalt sofort neu. Die Voreinstellungen entsprechen gängigen Konventionen: 4 Leerzeichen, Allow 2 bei den Leerzeilen (bei JavaScript und CSS bleibt damit höchstens eine Leerzeile am Stück stehen), kein automatischer Umbruch langer Zeilen, Klammer in der Zeile der Kontrollanweisung. Hast du die Optionen einmal geändert, haben deine gespeicherten Werte Vorrang (siehe Code und Optionen bleiben erhalten).

Indentation (Einrückung)

Bestimmt, womit eingerückt wird:

Tab character — ein echtes Tabulator-Zeichen pro Ebene.
2 spaces, 3 spaces, 4 spaces (Voreinstellung), 8 spaces — die entsprechende Anzahl Leerzeichen pro Ebene.

Newlines (Leerzeilen)

Steuert, wie viele aufeinanderfolgende Zeilenumbrüche aus der Eingabe erhalten bleiben. Der Wert zählt Zeilenumbrüche, nicht Leerzeilen, und wirkt je nach Sprache unterschiedlich:

Remove all extra — bewahrt keine Leerzeilen aus der Eingabe.
Allow 1, Allow 2 (Voreinstellung), Allow 5, Allow 10 — höchstens so viele Zeilenumbrüche am Stück. Bei JavaScript und CSS bleiben damit höchstens N−1 Leerzeilen stehen: Allow 1 entfernt alle Leerzeilen (wie Remove all extra), Allow 2 lässt eine stehen, Allow 5 vier. Bei HTML entspricht der Wert der Zahl der Leerzeilen: Allow 2 lässt dort zwei stehen.
Unlimited — nur bei JavaScript ohne Obergrenze. Bei CSS und HTML entfernt diese Einstellung dagegen alle Leerzeilen aus der Eingabe.

Zwischen zwei CSS-Regeln setzt der Formatierer unabhängig von dieser Einstellung immer mindestens eine Leerzeile.

Line Wrap (Zeilenumbruch)

Legt die maximale Zeilenlänge fest, ab der umgebrochen wird:

No wrap (Voreinstellung) — keine automatischen Umbrüche.
40 chars, 70 chars, 80 chars, 110 chars, 120 chars, 160 chars — bricht Zeilen ab der gewählten Zeichenzahl um (soweit die Sprache das zulässt).

Brace Style (Klammer-Stil)

Bestimmt, wo geschweifte Klammern landen (vor allem für JavaScript relevant):

With control statement (Voreinstellung) — öffnende Klammer in derselben Zeile wie die Kontrollanweisung (if (x) {).
Inline or with control — Blöcke, die in der Eingabe schon in einer Zeile stehen, behalten ihre Klammern in dieser Zeile; alle anderen wie oben. Ganz einzeilig bleiben dabei nur Blöcke mit einer einzigen Anweisung (if (a) { b() }) und Objekt-Literale ({ a: 1, b: 2 }). Stehen mehrere Anweisungen im Block, setzt der Formatierer jede weitere in eine eigene Zeile. Ist Line Wrap gesetzt, bricht er auch lange Inline-Blöcke um.
On own line — öffnende Klammer in eigener Zeile.
End on own line — die öffnende Klammer bleibt wie bei With control statement in der Anweisungszeile, die schließende Klammer steht aber allein in ihrer Zeile; else, catch und finally beginnen deshalb eine neue Zeile (} und darunter else {).
Keep as-is — der vorhandene Klammer-Stil wird nicht verändert.

Diese Auswahl arbeitet mit der Checkbox Preserve inline braces zusammen (siehe unten).

HTML Scripts

Steuert die Einrückung von <script>-Inhalten innerhalb von HTML:

Keep tag indent (Voreinstellung) — der Skript-Inhalt behält die Einrückung des umgebenden Tags.
Add one level — eine Einrückungsebene zusätzlich.
Separate — der Skript-Inhalt beginnt am Zeilenanfang, unabhängig davon, wie tief das <script>-Tag eingerückt ist.

Die Zusatz-Optionen

Im Karten-Block Options liegen elf Checkboxen für Feinheiten. Ab Werk ist nur Space before conditional gesetzt, alle anderen sind aus. Eine geänderte Checkbox wird gespeichert, formatiert aber nicht von selbst neu — klick danach auf Beautify.

Detect packers

Aktiviert das Entpacken/Deobfuskieren vor dem Formatieren — wirkt ausschließlich auf JavaScript. Ist der Haken gesetzt, durchläuft der Code zuerst eine Entpacker-Kette und wird anschließend formatiert. Details und Grenzen siehe Entpacken und Deobfuskieren.

End with newline

Hängt am Ende der Ausgabe eine abschließende Leerzeile (Newline) an.

Support e4x/jsx

Lässt den JS-Formatierer E4X- bzw. JSX-Syntax (XML-Literale in JavaScript) als solche erkennen. Ohne die Option bricht der Formatierer nicht ab, sondern reißt JSX ohne Warnung auseinander: Aus <div class="a"> wird < div class = "a" >. Ab Werk ist die Option aus. Schalte sie ein, bevor du eine .jsx- oder .tsx-Datei per Upload lädst, denn der Upload formatiert sofort.

Comma-first style

Setzt Kommata bei Aufzählungen an den Zeilenanfang statt ans Zeilenende (Comma-first-Stil).

Preserve inline braces

Ergänzt den gewählten Brace Style um die Variante, bei der bereits inline stehende Klammer-Blöcke inline bleiben dürfen — mit denselben Grenzen wie bei Inline or with control.

Keep array indent

Bewahrt die vorhandene Einrückung innerhalb von Array-Literalen, statt sie neu auszurichten.

Break chained methods

Bricht verkettete Methodenaufrufe (a.b().c().d()) auf mehrere Zeilen um.

Space before conditional

Setzt ein Leerzeichen vor der Klammer von Bedingungen (if ( statt if(). Als einzige Checkbox ab Werk aktiv.

Unescape strings

Wandelt escapte Zeichen in Strings (z. B. \x41-Sequenzen) wieder in lesbare Zeichen um — nützlich beim Aufräumen obfuskierter Strings.

JSLint-happy

Formatiert nach den strengeren Konventionen von JSLint (z. B. bei Funktions-Leerzeichen).

Indent head/body

Rückt bei HTML die Inhalte von <head> und <body> zusätzlich ein.

Entpacken und Deobfuskieren

Mit aktiviertem Detect packers läuft JavaScript vor dem Formatieren durch eine Entpacker-Kette. Das Tool trennt zunächst führende Kommentare (/* … */ und // …) ab und stellt sie dem Ergebnis später wieder voran, prüft den Code dann gegen die bekannten Pack-Verfahren und entpackt rekursiv, solange sich noch etwas verändert. Aktiv sind zwei Entpacker:

P.A.C.K.E.R. — das verbreitete eval(function(p,a,c,k,e,d){…})-Format (Dean Edwards' Packer). Der Entpacker liest aus dem gepackten Aufruf Nutzlast, Zahlenbasis, Anzahl und die |-getrennte Symboltabelle und setzt die Wörter wieder ein. Unterstützt werden die Basen 2 bis 36, 37 bis 62 und 95; mehrere gepackte Blöcke in einer Datei werden einzeln dekodiert.
URL-encoded — per URL-Encoding (%xx) verschleierter Code. Er wird erkannt, wenn der Text kein einziges Leerzeichen enthält und %2 oder mehr als drei %-Zeichen vorkommen.

Der gepackte Code wird dabei nicht ausgeführt. Der P.A.C.K.E.R.-Entpacker dekodiert ausschließlich die Argumente des Aufrufs — anders als klassische Entpacker, die den Code per eval laufen lassen und das Ergebnis abfangen. Du kannst also auch verdächtigen Code gefahrlos entpacken.

Wichtig zur ehrlichen Einordnung:

Das Entpacken ist musterbasiert, nicht KI-gestützt. Es macht bekannte, umkehrbare Pack-Verfahren rückgängig — mehr nicht.
„Echte" Obfuskatoren, die Symbolnamen umbenennen, Kontrollfluss verschleiern oder String-Arrays aufbauen, lassen sich damit nicht in den Originalcode zurückverwandeln. Solcher Code wird dann lediglich sauber formatiert (und mit Unescape strings ggf. lesbarer), aber nicht logisch rekonstruiert.
Ohne gesetzten Haken findet kein Entpacken statt — der Code wird nur formatiert.

Editor-Werkzeugleiste

Die Werkzeugleiste oben rechts im Editor-Block bietet folgende Aktionen.

Startet die Formatierung. Der Knopf existiert doppelt (Werkzeugleiste mit Zauberstab-Symbol und große Schaltfläche Beautify (Ctrl+Enter) in der Fußzeile) — beide tun dasselbe. Unter der großen Schaltfläche verweist ein Hinweis auf das Compiler-Tool, falls du minifizieren oder SCSS kompilieren willst.

Upload

Öffnet einen Datei-Dialog und lädt eine Datei in den Editor. Der Dialog bietet .js, .css, .html, .htm, .json, .jsx, .ts und .tsx an. Die Datei wird lokal eingelesen (kein Upload zum Server), die Sprache aus der Dateiendung fest gesetzt und der Inhalt automatisch formatiert; eine Meldung „Loaded: …" bestätigt das. Endungen wie .jsx, .ts, .tsx und .json werden dabei als JavaScript behandelt, .scss/.less als CSS, .htm/.xml als HTML. .scss, .less und .xml zeigt der Dialog allerdings erst, wenn du dort den Dateifilter auf alle Dateien umstellst. Bei anderen Endungen bleibt die Sprachwahl unverändert. Weil sofort mit den aktuellen Optionen formatiert wird, schaltest du für .jsx/.tsx vorher Support e4x/jsx ein. Im Code-Editor macht Strg+Z zuerst die Formatierung rückgängig (dann steht der Dateiinhalt im Original da), ein zweites Strg+Z holt den Stand vor dem Laden zurück.

Download

Speichert den aktuellen Editor-Inhalt als Datei — auch per Strg+S im Editor. Der Dateiname richtet sich nach der gewählten bzw. erkannten Sprache (beautified.js, beautified.css oder beautified.html); JSON landet damit als beautified.js, den Namen passt du beim Speichern an. Ist der Editor leer, erscheint „Nothing to download.".

Copy

Kopiert den gesamten Editor-Inhalt in die Zwischenablage (nicht nur eine Auswahl). Ist der Editor leer, erscheint ein Hinweis.

Clear

Leert den Editor und setzt die Sprache zurück auf Auto-detect. Steht Code im Editor, fragt das Tool vorher nach („Clear the editor? (Ctrl+Z undoes it.)"). Das Leeren ist im Code-Editor ein eigener Undo-Schritt — Strg+Z holt den Code zurück. Mit dem Editor wird auch der im Browser gespeicherte Code geleert.

Editor umschalten

Ein Knopf wechselt zwischen dem Code-Editor ACE (Syntax-Highlighting, Zeilennummern, weicher Zeilenumbruch) und einem schlichten Textfeld („Switch to simple textarea" bzw. „Switch to code editor"). Die Textfeld-Variante erreichst du auch direkt über den URL-Parameter ?without-editor; der frühere Parameter ?without-codemirror funktioniert weiterhin. Praktisch für sehr große Dateien oder wenn der Editor stört. Der gespeicherte Code und die Optionen stehen in beiden Varianten zur Verfügung.

Tastenkürzel

Strg+Enter — formatiert den aktuellen Editor-Inhalt genau einmal (entspricht einem Klick auf Beautify). Im ACE-Editor auf dem Mac auch Cmd+Enter.
Strg+S — lädt den Editor-Inhalt herunter (wie Download), auf dem Mac Cmd+S. Nur im ACE-Editor, nicht im schlichten Textfeld.
Strg+Z — macht im ACE-Editor den letzten Schritt rückgängig. Formatieren, Datei laden und Clear sind jeweils ein eigener Schritt, sodass du damit gezielt zum vorherigen Stand zurückkommst.

Code und Optionen bleiben erhalten

Beautify merkt sich zwei Dinge im lokalen Speicher deines Browsers (localStorage):

den Editor-Inhalt — kurz nach jeder Änderung gespeichert,
alle Optionen — die fünf Dropdowns, die elf Checkboxen und die Sprachwahl.

Nach einem Neuladen steht beides wieder da. Der wiederhergestellte Code gilt dabei nicht als Änderung: Strg+Z leert den Editor nicht. Gespeicherte Optionen haben Vorrang vor den Voreinstellungen. Es gibt keinen Verlauf mehrerer Stände, sondern nur den jeweils letzten. Lässt der Browser keinen Speicher zu (etwa in manchen privaten Fenstern), arbeitet das Tool normal weiter, vergisst aber beim Neuladen alles.

Architektur und Datenschutz

Beautify ist ein rein clientseitiges Werkzeug. Die PHP-Seite liefert nur das Markup aus; die eigentliche Arbeit — Formatieren, Entpacken, Sprach-Erkennung, Datei-Lesen, Kopieren, Download, Speichern — erledigen JavaScript-Bibliotheken in deinem Browser. Es gibt keinen Proxy, keine API und keine Anfragen an einen Server:

js-beautify (Module für JavaScript, CSS und HTML) übernimmt das Formatieren.
Die Entpacker (P.A.C.K.E.R., URL-encoded) laufen ebenfalls lokal und führen den gepackten Code nicht aus.
ACE stellt den Editor.

Daraus folgt der Datenschutz-Vorteil: Dein Code wird nicht an einen Server gesendet. Auch hochgeladene Dateien werden nur lokal gelesen. Das Tool ist damit unbedenklich für proprietären, internen oder vertraulichen Quelltext. Bedenke nur, dass der letzte Editor-Inhalt im Browser gespeichert bleibt (siehe Code und Optionen bleiben erhalten) — auf einem fremden oder geteilten Rechner leerst du den Editor nach getaner Arbeit mit Clear.

Grenzen

Drei Sprachen. Formatiert werden JavaScript, CSS und HTML. JSON/JSONP laufen über den JavaScript-Formatierer mit (gültiges JSON ist gültiges JS) — eine eigene JSON-Validierung gibt es hier nicht.
TypeScript ist nicht TypeScript-spezifisch. .ts/.tsx werden als JavaScript behandelt; TS-eigene Syntax wird nicht gesondert verstanden und kann unsauber formatiert werden. JSX in .jsx/.tsx übersteht das Formatieren nur mit eingeschaltetem Support e4x/jsx.
Entpacken nur für JavaScript und nur für zwei bekannte Verfahren (P.A.C.K.E.R. und URL-Encoding) — siehe Entpacken und Deobfuskieren. Andere Formate wie MyObfuscate oder JavaScript Obfuscator entpackt das Tool nicht, Symbol-umbenennende Obfuskatoren werden nicht rekonstruiert.
Ein Editor für Ein- und Ausgabe. Das Ergebnis ersetzt die Eingabe; einen Vorher-Nachher-Vergleich nebeneinander gibt es nicht — dafür Strg+Z bzw. das Compiler-Tool mit getrennten Feldern.
Kein KI-Bezug. Es gibt keine Modell- oder LLM-Komponente; „deobfuscate" meint hier ausschließlich das musterbasierte Entpacken.

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite. Konkrete Abläufe zeigen die Beispiele, Strategie und Stolperfallen die Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.