JPKCom DB

Beautify — Tipps & Tricks

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

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

Das Manual erklärt jede Option, die Beispiele 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 und schick den Klartext anschließend durch Beautify.
  • Quelltext erst beschaffen. Den ausgelieferten HTML-/CSS-/JS-Quelltext einer Seite holst du mit Source und machst ihn hier lesbar.
  • Die Gegenrichtung. Wenn du formatierten Code wieder klein bekommen oder SASS/SCSS kompilieren willst, ist Compiler das passende Tool — er minifiziert (und beautifyt) HTML, JS und CSS.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Option und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.