# Beautify — Manual

> Vollständige Funktionsbeschreibung von Beautify: Eingabe und Ablauf, jede Formatierungs- und Zusatz-Option, das Entpacken, die Werkzeugleiste und die Grenzen.

Source: https://www.jpkc.com/db/tools/beautify/manual/

Zurück zur Übersicht: [Beautify](https://www.jpkc.com/db/tools/beautify/) · Tool live öffnen: [www.jpkc.com/tools/beautify/](https://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:

1. **Code einfügen** — direkt in den Editor tippen/einfügen oder über **Upload** eine Datei laden.
2. **Optional Sprache und Optionen wählen** — standardmäßig erkennt das Tool die Sprache automatisch.
3. **Beautify klicken** (Werkzeugleiste oder Fußzeile) oder **Strg+Enter** drücken.
4. **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](#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](#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](#brace-style-klammer-stil) 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](#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](#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.

### Beautify

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](#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](https://www.jpkc.com/db/tools/beautify/). Konkrete Abläufe zeigen die [Beispiele](https://www.jpkc.com/db/tools/beautify/examples/), Strategie und Stolperfallen die [Tipps & Tricks](https://www.jpkc.com/db/tools/beautify/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/beautify/).