JPKCom DB

Beautify — Beispiele

Praxisnahe Durchläufe mit Beautify: minifiziertes JS, CSS, HTML und JSON formatieren, gepackten Code entpacken, Dateien laden, Optionen feinjustieren.

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

Das Manual erklärt jede Option im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch — Options- und Button-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung. Alle Zahlenwerte unten sind Beispiele, keine Vorgaben.

Beispiel 1: Eine minifizierte JS-Datei lesbar machen

Der Klassiker — du hast eine min.js-Zeile aus dem Build und willst sehen, was sie tut.

  1. Öffne Beautify und füge den minifizierten Code in den Editor ein. Lass das Sprach-Dropdown auf Auto-detect — Code wie !function(e){…} oder var a=… beginnt weder mit < noch mit einem CSS-Selektor samt Deklarationsblock, also erkennt das Tool ihn als JavaScript.
  2. Drück Strg+Enter (oder klick Beautify). Die eine lange Zeile wird in eingerückte Blöcke aufgefächert, Klammern und Anweisungen stehen wieder lesbar untereinander — ab Werk mit 4 Leerzeichen Einrückung und if ( mit Leerzeichen.
  3. Passt die Einrückung nicht zu deinem Projekt, stell Indentation auf Tab character oder z. B. 2 spaces — das Tool formatiert nach der Änderung automatisch neu und merkt sich die Wahl für das nächste Mal.
  4. Übernimm das Ergebnis mit Copy in die Zwischenablage.

Willst du kurz die Originalzeile vergleichen, drück Strg+Z: Der unformatierte Code steht wieder da, Strg+Enter formatiert erneut.

Damit hast du aus einem unlesbaren Einzeiler wieder navigierbaren Code gemacht — ideal, um eine Stelle in der Produktion zu verstehen oder einen Bug-Report nachzuvollziehen.

Beispiel 2: CSS aus dem DevTools-Inspector entwirren

Du hast computed/komprimiertes CSS kopiert und willst es in eine saubere, versionierbare Form bringen.

  1. Füge das CSS ein. Beginnt es mit einer At-Regel (@media, @font-face, @layer …) oder mit einem Selektor samt Deklarationsblock (.btn{color:red}), erkennt Auto-detect es als CSS. Im Zweifel stellst du das Dropdown manuell auf CSS und klickst danach auf Beautify — die Sprachwahl allein formatiert noch nicht neu.
  2. Wähl die gewünschte Indentation (z. B. 2 spaces für ein typisches Frontend-Projekt); das Tool formatiert sofort neu.
  3. Setz Newlines auf Allow 1, wenn innerhalb einer Regel keine Leerzeilen stehen bleiben sollen (ab Werk, mit Allow 2, bleibt höchstens eine stehen). Remove all extra wirkt bei CSS genauso; die Leerzeile zwischen zwei Regeln setzt der Formatierer in beiden Fällen.
  4. Lad das Ergebnis per Download (oder Strg+S) als beautified.css herunter.

Das Resultat ist konsistent eingerücktes CSS, das sich sauber in ein Stylesheet einfügt und in der Versionskontrolle lesbare Diffs erzeugt.

Beispiel 3: Verschachteltes HTML einrücken

Ein HTML-Block ohne Umbrüche — etwa aus einem CMS-Export — soll wieder eine erkennbare Struktur bekommen.

  1. Füge das HTML ein. Da es mit < beginnt, erkennt Auto-detect es als HTML.
  2. Klick Beautify. Tags werden ihrer Verschachtelung entsprechend eingerückt.
  3. Für ganze Dokumente aktivier Indent head/body, damit auch die Inhalte von <head> und <body> eine Ebene mehr bekommen, und klick erneut auf Beautify — Checkboxen formatieren nicht von selbst neu.
  4. Enthält das HTML <script>-Blöcke, steuere deren Einrückung über HTML Scripts — etwa Add one level, damit der Skript-Inhalt klar zum umgebenden Tag gehört. Als Dropdown wirkt diese Option sofort.

So wird aus einem HTML-Klumpen ein Baum, dessen Hierarchie du auf einen Blick erfasst.

Beispiel 4: Gepackten JavaScript-Code entpacken

Du bist auf Code im eval(function(p,a,c,k,e,d)…)-Format gestoßen (P.A.C.K.E.R.) und willst sehen, was dahintersteckt.

  1. Füge den gepackten Code ein und lass die Sprache auf JavaScript (Auto-detect genügt: eval( zählt als Aufruf und damit als JavaScript).
  2. Setz den Haken bei Detect packers im Options-Block — er ist ab Werk aus.
  3. Klick Beautify. Das Tool erkennt das Pack-Format, entpackt es (rekursiv, falls mehrfach gepackt) und formatiert das Ergebnis anschließend. Ein Kopfkommentar vor dem gepackten Block bleibt oben erhalten. Ausgeführt wird dabei nichts: Der Entpacker dekodiert nur die Symboltabelle, du kannst also auch Code aus einer verdächtigen Quelle gefahrlos untersuchen.
  4. Sind im entpackten Code escapte Strings übrig (z. B. \x68\x69), aktivier zusätzlich Unescape strings und formatiere erneut — die Strings werden dann lesbar.

Wichtig zur Erwartung: Das funktioniert für die zwei bekannten, umkehrbaren Verfahren P.A.C.K.E.R. und URL-Encoding. Code, der mit Symbol-Umbenennung oder Kontrollfluss-Verschleierung obfuskiert wurde, wird damit nur formatiert, nicht in den Originalcode zurückverwandelt.

Beispiel 5: Datei laden, formatieren, herunterladen

Wenn der Code schon als Datei vorliegt, sparst du dir das Kopieren.

  1. Klick in der Werkzeugleiste auf Upload und wähl die Datei (z. B. eine .js, .css oder .html).
  2. Beautify liest die Datei lokal ein, setzt die Sprache anhand der Dateiendung und formatiert automatisch — du musst nicht extra auf Beautify klicken. Eine .json-, .jsx- oder .ts-Datei läuft dabei als JavaScript, eine .htm als HTML. Für .jsx/.tsx schaltest du vorher Support e4x/jsx ein, sonst reißt das automatische Formatieren das JSX auseinander.
  3. Prüf das Ergebnis im Editor, justier bei Bedarf die Optionen (jede Dropdown-Änderung formatiert neu; nach dem Setzen einer Checkbox einmal auf Beautify klicken).
  4. Klick Download oder drück Strg+S — die Datei wird nach Sprache benannt (beautified.js / .css / .html); den ursprünglichen Dateinamen vergibst du beim Speichern selbst.

Die Sprache bleibt nach dem Upload bis zum Neuladen fest auf der erkannten Sprache stehen. Änderst du nach dem Upload eine Option wie in Schritt 3, speichert das Tool die Sprache mit, und sie steht auch nach dem Neuladen noch fest. Fügst du danach Code einer anderen Sprache ein, stell das Dropdown zurück auf Auto-detect (oder nutze Clear, das die Sprache ebenfalls zurücksetzt).

Der ganze Vorgang bleibt in deinem Browser; die Datei wird zu keinem Zeitpunkt hochgeladen.

Beispiel 6: Die Optionen gezielt feinjustieren

Du willst Code nicht nur formatieren, sondern an einen bestimmten Stil-Standard angleichen.

  1. Füge den Code ein und formatiere einmal mit Beautify — mit den Voreinstellungen (4 Leerzeichen, Newlines auf Allow 2, kein Umbruch, Klammer in der Anweisungszeile).
  2. Einrückung festlegen: Indentation → Tab character oder die gewünschte Leerzeichen-Zahl.
  3. Klammer-Stil wählen: Brace Style → On own line, wenn öffnende Klammern in eine eigene Zeile sollen; With control statement, wenn sie ans Anweisungsende gehören. Sollen Blöcke, die schon in einer Zeile stehen, inline bleiben, kombinierst du das mit Preserve inline braces — ganz einzeilig bleiben dann Blöcke mit einer einzigen Anweisung und Objekt-Literale, mehrere Anweisungen bricht der Formatierer trotzdem um.
  4. Zeilenlänge zähmen: Line Wrap → z. B. 80 chars, damit lange Zeilen umgebrochen werden — auch innerhalb von Inline-Blöcken.
  5. Stil-Schalter setzen: etwa Break chained methods für lange Methodenketten oder Comma-first style, wenn dein Projekt Kommata an den Zeilenanfang setzt. Nach jeder Checkbox einmal Strg+Enter drücken.

Weil das Tool nach jeder Dropdown-Änderung automatisch neu formatiert, siehst du die Wirkung dieser Optionen sofort — du tastest dich so in wenigen Klicks an genau den Stil heran, den du brauchst. Alle Einstellungen speichert das Tool im Browser: Beim nächsten Besuch steht dein Hausstil schon bereit.

Beispiel 7: Eine JSON- oder JSONP-Antwort lesbar machen

Du hast eine API-Antwort aus dem Netzwerk-Tab der DevTools kopiert — eine einzige Zeile JSON, vielleicht in einen JSONP-Callback verpackt.

  1. Füge die Antwort ein, zum Beispiel:

    {"user":{"id":42,"roles":["admin","dev"]},"active":true}

  2. Lass die Sprache auf Auto-detect. Beginnt der Text mit { oder [ und ist gültiges JSON, schickt das Tool ihn an den JavaScript-Formatierer. Eine JSONP-Antwort wie callback({…}) erkennt die Automatik am Funktionsaufruf ebenfalls als JavaScript.

  3. Drück Strg+Enter. Objekte werden aufgefächert, jeder Schlüssel steht in einer eigenen Zeile; kurze Arrays bleiben einzeilig:

    json
    {
    "user": {
        "id": 42,
        "roles": ["admin", "dev"]
    },
    "active": true
}

  4. Brauchst du nur einen Ausschnitt, markier ihn im Editor und kopier ihn mit Strg+C — Copy nimmt immer den ganzen Inhalt.

Beautify formatiert das JSON nur. Ist es ungültig (etwa mit abschließendem Komma), formatiert der JavaScript-Formatierer es trotzdem, ohne dich zu warnen. Prüfen, reparieren oder umbauen kannst du es im JSON Editor.

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Option und die Tipps & Tricks für Strategie und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.