# Beautify — Tipps & Tricks

> Kniffe für Beautify: Sprach-Erkennung, das Entpacken realistisch einschätzen, Editor-Modi, Datenschutz und die Kombination mit anderen JPKCom-Tools.

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

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/)

Das [Manual](https://www.jpkc.com/db/tools/beautify/manual/) erklärt jede Option, die [Beispiele](https://www.jpkc.com/db/tools/beautify/examples/) zeigen die Abläufe. Hier geht es um das, was beides voraussetzt, aber selten dabeisteht: wo das Tool seine Stärken hat, wo seine echten Grenzen liegen und wie du es mit anderen JPKCom-Tools verzahnst. Die Oberfläche ist auf Englisch — die echten Options- und Button-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

## Die Sprach-Erkennung verstehen — und übersteuern

- **Auto-detect ist eine Heuristik, kein Garant.** Sie entscheidet anhand des Zeilenanfangs: `<` → HTML, ein CSS-Muster (`@media`, `@font-face`, Selektor mit `{` …) → CSS, sonst JavaScript. Ein CSS-Fragment, das mitten in einem Regelblock anfängt, oder ein HTML-Schnipsel, das mit einem Kommentar beginnt, kann danebengeraten.
- **Im Zweifel manuell setzen.** Bekommst du unerwartete Ausgabe, stell das Sprach-Dropdown von Hand auf **JavaScript**, **CSS** oder **HTML**. Das ist der schnellste Fix für „warum sieht das falsch aus".
- **JSON gehört zu JavaScript.** Für JSON/JSONP wählst du **JavaScript** — gültiges JSON ist gültiges JS und wird sauber eingerückt. Brauchst du echte Validierung, Schlüssel-Sortierung oder Transformation, ist das **JSON-Editor**-Tool die richtige Adresse.

## Das Entpacken realistisch einschätzen

- **Detect packers wirkt nur auf JavaScript.** Für CSS und HTML hat der Haken keine Wirkung — dort wird ausschließlich formatiert.
- **Es sind drei bekannte Pack-Verfahren.** Entpackt werden P.A.C.K.E.R. (`eval(function(p,a,c,k,e,d)…`), URL-encodierter Code und MyObfuscate. Trifft keines zu, passiert beim Entpacken schlicht nichts — der Code wird dann nur formatiert.
- **„Deobfuscate" heißt nicht „Originalcode zurück".** Das Entpacken ist musterbasiert und macht **umkehrbare** Verpackung rückgängig. Echte Obfuskatoren, die Variablennamen kryptisch umbenennen, den Kontrollfluss verschleiern oder String-Arrays aufbauen, bleiben inhaltlich verschleiert — du bekommst nur eine **lesbar formatierte** Fassung, keine rekonstruierten Originalnamen. Das ist eine prinzipielle Grenze, kein Bedienfehler.
- **Escapte Strings separat aufräumen.** Bleiben nach dem Entpacken `\x..`- oder `\u..`-Sequenzen übrig, hol sie mit **Unescape strings** in Klartext — das macht viele „versteckte" String-Literale erst sichtbar.
- **Kein KI-Magie-Erwartungsmanagement nötig:** Es ist keine KI im Spiel. Wer einen LLM-gestützten „Erklär mir diesen Code"-Schritt braucht, kombiniert Beautify (lesbar machen) mit einem separaten KI-Werkzeug seiner Wahl.

## Optionen, die oft übersehen werden

- **Auto-Reformat bei Optionsänderung.** Jede Änderung an einem der Dropdowns formatiert sofort neu. Das ist bequem zum Ausprobieren — kann aber überraschen, wenn du eine Option umstellst und der Editor-Inhalt sich „von selbst" umbaut. Kein Bug: einfach die Wirkung der Option.
- **Brace Style und Preserve inline braces gehören zusammen.** Willst du Klammern grundsätzlich auf eigene Zeilen, aber kurze Inline-Blöcke in Ruhe lassen, kombinier den passenden **Brace Style** mit **Preserve inline braces**.
- **Newlines „Remove all extra" vs. „Unlimited".** Ersteres entfernt alle zusätzlichen Leerzeilen (maximal kompakt), Letzteres lässt beliebig viele stehen. Für lesbaren, aber nicht aufgeblähten Code ist **Allow 1** oder **Allow 2** meist die beste Wahl.
- **Tab character spart Diff-Streit.** Wenn dein Projekt Tabs nutzt, wähl **Tab character** statt einer Leerzeichen-Zahl — sonst formatierst du gegen den Projektstandard.

## Editor, Dateien und Datenschutz

- **CodeMirror oder schlichtes Textfeld.** Der Umschalt-Knopf (bzw. der URL-Parameter `?without-codemirror`) wechselt zum reinen Textfeld. Das hilft bei sehr großen Dateien, wenn das Syntax-Highlighting träge wird, oder wenn du den Code unverändert per Tastatur weiterreichen willst.
- **Copy nimmt alles.** Der Copy-Knopf kopiert den **gesamten** Editor-Inhalt, nicht eine markierte Auswahl. Brauchst du nur einen Ausschnitt, markier und kopier im Editor selbst.
- **Upload bleibt lokal.** Hochgeladene Dateien werden im Browser gelesen, nicht zu einem Server geschickt — und nach dem Laden direkt formatiert. `.ts`/`.tsx`/`.jsx`/`.json` behandelt das Tool als JavaScript; reine TypeScript-Syntax kann dabei unsauber formatiert werden.
- **Sicher für vertraulichen Code.** Weil alles clientseitig läuft, verlässt dein Quelltext den Browser nicht. Du kannst also bedenkenlos internen oder proprietären Code formatieren.

## Mit anderen JPKCom-Tools kombinieren

Beautify macht Code **lesbar** — für die angrenzenden Schritte gibt es passende Werkzeuge. Das Muster: erst das richtige Tool, dann durch Beautify.

- **Erst decodieren, dann formatieren.** Steckt dein Code in Base64, einer Data-URI, URL-Encoding oder HTML-Entities, entschlüssle ihn zuerst mit **[Coder](https://www.jpkc.com/db/tools/coder/)** und schick den Klartext anschließend durch Beautify.
- **Quelltext erst beschaffen.** Den ausgelieferten HTML-/CSS-/JS-Quelltext einer Seite holst du mit **[Source](https://www.jpkc.com/db/tools/source/)** und machst ihn hier lesbar.
- **Die Gegenrichtung.** Wenn du formatierten Code wieder klein bekommen oder SASS/SCSS kompilieren willst, ist **[Compiler](https://www.jpkc.com/db/tools/compiler/)** das passende Tool — er minifiziert (und beautifyt) HTML, JS und CSS.

---

Noch mehr Kontext: die [Übersicht](https://www.jpkc.com/db/tools/beautify/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/beautify/manual/) für jede Option und die [Beispiele](https://www.jpkc.com/db/tools/beautify/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/beautify/).