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.
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.

Eine Besonderheit: Sobald du eine der Auswahl-Optionen (Dropdowns) änderst, formatiert das Tool automatisch neu. Du musst nach einer Optionsänderung also nicht erneut auf Beautify klicken.

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 CodeMirror.

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 Inhalt: Beginnt der Text mit < (und nicht mit einem HTML-Kommentar), gilt er als HTML; passt er auf typische CSS-Muster (@import, @media, @charset, @font-face oder ein Selektor mit {), gilt er als CSS; andernfalls 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 ohne @-Regel und ohne öffnende Klammer beginnt), setz die Sprache von Hand. Die Wahl steuert außerdem das Syntax-Highlighting des Editors und die Dateiendung beim Download.

Die Formatierungs-Optionen

Diese fünf Dropdowns im Karten-Block Formatting steuern das grundlegende Layout.

Indentation (Einrückung)

Bestimmt, womit eingerückt wird:

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

Newlines (Leerzeilen)

Steuert, wie viele aufeinanderfolgende Leerzeilen erhalten bleiben:

Remove all extra — entfernt alle zusätzlichen Leerzeilen (Leerzeilen werden nicht bewahrt).
Allow 1, Allow 2, Allow 5, Allow 10 — lässt höchstens so viele Leerzeilen am Stück stehen.
Unlimited — keine Obergrenze für aufeinanderfolgende Leerzeilen.

Line Wrap (Zeilenumbruch)

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

No wrap — 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 — öffnende Klammer in derselben Zeile wie die Kontrollanweisung (if (x) {).
Inline or with control — kurze Blöcke bleiben inline, sonst wie oben.
On own line — öffnende Klammer in eigener Zeile.
End on own line — Variante, bei der die Klammer am Zeilenende eigenständig steht.
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 — der Skript-Inhalt behält die Einrückung des umgebenden Tags.
Add one level — eine Einrückungsebene zusätzlich.
Separate — der Skript-Block wird gesondert eingerückt.

Die Zusatz-Optionen

Im Karten-Block Options liegen elf Checkboxen für Feinheiten.

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) tolerieren, statt daran zu scheitern.

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.

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().

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 entfernt zunächst führende Kommentare, prüft den Code dann gegen mehrere bekannte Pack-Verfahren und entpackt rekursiv, solange sich noch etwas verändert. Aktiv sind drei Entpacker:

P.A.C.K.E.R. — das verbreitete eval(function(p,a,c,k,e,d){…})-Format (Dean Edwards' Packer).
URL-encoded — per URL-Encoding (%xx) verschleierter Code.
MyObfuscate — das MyObfuscate-Format.

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 in der Fußzeile) — beide tun dasselbe.

Upload

Öffnet einen Datei-Dialog und lädt eine Datei in den Editor. Akzeptiert werden unter anderem .js, .css, .html, .htm, .json, .jsx, .ts und .tsx. Die Datei wird lokal eingelesen (kein Upload zum Server), die Sprache aus der Dateiendung gesetzt und der Inhalt automatisch formatiert. Endungen wie .jsx, .ts, .tsx und .json werden dabei als JavaScript behandelt, .scss/.less als CSS, .htm/.xml als HTML.

Download

Speichert den aktuellen Editor-Inhalt als Datei. Der Dateiname richtet sich nach der erkannten Sprache (beautified.js, beautified.css, beautified.html, sonst beautified.txt).

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.

Editor umschalten

Ein Knopf wechselt zwischen dem komfortablen CodeMirror-Editor (Syntax-Highlighting, Zeilennummern) und einem schlichten Textfeld. Die Textfeld-Variante erreichst du auch direkt über den URL-Parameter ?without-codemirror — praktisch für sehr große Dateien oder wenn der Editor stört.

Tastenkürzel

Strg+Enter — formatiert den aktuellen Editor-Inhalt (entspricht einem Klick auf Beautify).

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 — erledigen JavaScript-Bibliotheken in deinem Browser:

js-beautify (Module für JavaScript, CSS und HTML) übernimmt das Formatieren.
Die Entpacker (P.A.C.K.E.R., URL-encoded, MyObfuscate) laufen ebenfalls lokal.
CodeMirror 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.

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.
Entpacken nur für JavaScript und nur für bekannte Packer — siehe Entpacken und Deobfuskieren. Symbol-umbenennende Obfuskatoren werden nicht rekonstruiert.
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.