JPKCom DB

Beautify — Tipps & Tricks

Kniffe für Beautify: Sprach-Erkennung, Entpacken ohne eval, Undo und gespeicherte Optionen, Editor-Modi, Datenschutz und andere 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 Textanfangs: < → HTML, gültiges JSON → JavaScript-Formatierer, typische JS-Anfänge (Schlüsselwörter, Kommentare, Aufrufe, Zuweisungen) → JavaScript, eine CSS-At-Regel oder ein Selektor mit Deklarationsblock → CSS, sonst JavaScript. Ein CSS-Fragment, das mitten in einem Regelblock anfängt, oder ein HTML-Schnipsel, das mit <!-- beginnt, kann danebengeraten — beides landet in der Regel beim JavaScript-Formatierer.
  • Im Zweifel manuell setzen. Bekommst du unerwartete Ausgabe, stell das Sprach-Dropdown von Hand auf JavaScript, CSS oder HTML und klick danach auf Beautify — die Sprachwahl allein formatiert nicht neu. Das ist der schnellste Fix für „warum sieht das falsch aus".
  • Feste Sprache wieder lösen. Eine manuell gewählte Sprache und die Sprache, die ein Upload aus der Dateiendung setzt, bleiben stehen — auch für den nächsten Code, den du einfügst. Über ein Neuladen hinweg merkt sich das Tool die im Dropdown gewählte Sprache; die Sprache aus einem Upload nur, wenn du danach noch eine Option änderst. Wechselst du die Sprache, stell zurück auf Auto-detect; Clear setzt die Sprache ebenfalls zurück.
  • JSON erkennt die Automatik selbst. Gültiges JSON und JSONP-Aufrufe wie callback({…}) gehen ohne Zutun an den JavaScript-Formatierer. Brauchst du echte Validierung, Schlüssel-Sortierung oder Transformation, ist der JSON Editor 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 zwei bekannte Pack-Verfahren. Entpackt werden P.A.C.K.E.R. (eval(function(p,a,c,k,e,d)…) und URL-encodierter Code. Trifft keines zu, passiert beim Entpacken schlicht nichts — der Code wird dann nur formatiert.
  • Entpacken ist ungefährlich. Der P.A.C.K.E.R.-Entpacker dekodiert nur die Argumente des gepackten Aufrufs und führt nichts davon aus. Du kannst also auch Code aus einer verdächtigen Quelle — etwa eingeschleustes JavaScript auf einer gehackten Seite — bedenkenlos hineinwerfen, um zu sehen, was er tut.
  • URL-Encoding nur ohne Leerzeichen. Der URL-Entpacker springt nur an, wenn der Text kein einziges Leerzeichen enthält. Steht vor dem Code noch ein Satz oder ein Leerzeichen, entferne es vorher — oder dekodiere den Text gleich mit Coder.
  • „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 nur bei den Dropdowns. Jede Änderung an einem der fünf Dropdowns im Block Formatting formatiert sofort neu. Das ist bequem zum Ausprobieren — kann aber überraschen, wenn du eine Option umstellst und der Editor-Inhalt sich „von selbst" umbaut. Die Checkboxen im Block Options wirken dagegen erst beim nächsten Beautify bzw. Strg+Enter.
  • Strg+Z ist dein Vorher-Nachher-Vergleich. Formatieren ist im Code-Editor ein eigener Undo-Schritt. Ein Strg+Z zeigt den Code vor der Formatierung, Strg+Enter formatiert wieder — so prüfst du schnell, was eine Option tatsächlich geändert hat. Auch ein versehentliches Clear machst du so rückgängig.
  • Die Einstellungen bleiben. Alle Optionen und die Sprachwahl speichert das Tool im Browser. Stellst du einmal deinen Hausstil ein, gilt er beim nächsten Besuch wieder. Die Voreinstellungen (4 Leerzeichen, Newlines auf Allow 2, if ( mit Leerzeichen) siehst du nur, solange du nichts verändert hast — oder nach dem Löschen der Website-Daten im Browser.
  • Brace Style und Preserve inline braces gehören zusammen. Willst du Klammern grundsätzlich auf eigene Zeilen, aber Blöcke, die schon in einer Zeile stehen, einzeilig lassen, kombinier den passenden Brace Style mit Preserve inline braces. Das klappt für Blöcke mit einer einzigen Anweisung und für Objekt-Literale; mehrere Anweisungen bricht der Formatierer trotzdem um, und ein gesetzter Line Wrap bricht auch lange Inline-Blöcke um.
  • Newlines zählt Zeilenumbrüche, nicht Leerzeilen. Bei JavaScript und CSS lässt die Voreinstellung Allow 2 eine Leerzeile stehen, Allow 1 dagegen keine — genau wie Remove all extra. Nur bei HTML entspricht der Wert der Zahl der Leerzeilen. Unlimited ist nur bei JavaScript grenzenlos; bei CSS und HTML entfernt es alle Leerzeilen. Für lesbaren, aber nicht aufgeblähten Code ist 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

  • ACE-Editor oder schlichtes Textfeld. Der Umschalt-Knopf (bzw. der URL-Parameter ?without-editor, alte Lesezeichen mit ?without-codemirror funktionieren weiter) wechselt zum reinen Textfeld. Das hilft bei sehr großen Dateien, wenn das Syntax-Highlighting träge wird. Beachte: Strg+S zum Herunterladen und die gezielten Undo-Schritte gibt es nur im ACE-Editor.
  • 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. Vor dem Laden von .jsx/.tsx schaltest du Support e4x/jsx ein — sonst reißt die sofortige Formatierung das JSX auseinander (Strg+Z im Code-Editor holt den Originalinhalt zurück).
  • Dateinamen selbst vergeben. Der Download heißt immer beautified.js, .css oder .html — auch für JSON. Willst du die Originaldatei ersetzen, benenn die Datei beim Speichern um.
  • Sicher für vertraulichen Code — mit einer Einschränkung. Weil alles clientseitig läuft, verlässt dein Quelltext den Browser nicht. Du kannst also bedenkenlos internen oder proprietären Code formatieren. Allerdings speichert das Tool den letzten Editor-Inhalt im lokalen Browser-Speicher, damit er ein Neuladen übersteht. Auf einem geteilten oder fremden Rechner leerst du den Editor deshalb nach der Arbeit mit Clear.

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 SCSS/Sass kompilieren willst, ist Compiler das passende Tool — er minifiziert (und beautifyt) HTML, JS und CSS, mit Eingabe und Ausgabe in getrennten Feldern. Der Link steht in Beautify direkt unter dem Editor.

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.