JPKCom DB

Beautify — Beispiele

Praxisnahe Durchläufe mit Beautify: minifiziertes JS, CSS und HTML formatieren, gepackten Code entpacken, Dateien laden und 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 — der Code beginnt nicht mit < und passt nicht auf CSS-Muster, 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.
  3. Stört dich die Einrückung mit Leerzeichen, stell Indentation auf Tab character oder z. B. 2 spaces — das Tool formatiert nach der Änderung automatisch neu.
  4. Übernimm das Ergebnis mit Copy in die Zwischenablage.

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 …) oder einem Selektor mit {, erkennt Auto-detect es als CSS. Im Zweifel das Dropdown manuell auf CSS stellen.
  2. Wähl die gewünschte Indentation (z. B. 2 spaces für ein typisches Frontend-Projekt) und klick Beautify.
  3. Setz Newlines auf Allow 1, wenn zwischen Regelblöcken genau eine Leerzeile stehen soll — oder auf Remove all extra, wenn du es maximal kompakt magst.
  4. Lad das Ergebnis per Download 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 tiefe Dokumente aktivier Indent head/body, damit auch die Inhalte von <head> und <body> eine Ebene mehr bekommen.
  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.

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 meist).
  2. Setz den Haken bei Detect packers im Options-Block.
  3. Klick Beautify. Das Tool erkennt das Pack-Format, entpackt es (rekursiv, falls mehrfach gepackt) und formatiert das Ergebnis anschließend.
  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 bekannte, umkehrbare Packer (P.A.C.K.E.R., URL-encoded, MyObfuscate). 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.
  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 — die Datei wird passend benannt gespeichert (beautified.js / .css / .html).

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.
  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. Für inline bleibende Kurzblöcke kombinierst du das mit Preserve inline braces.
  4. Zeilenlänge zähmen: Line Wrap → z. B. 80 chars, damit lange Zeilen umgebrochen werden.
  5. Stil-Schalter setzen: etwa Break chained methods für lange Methodenketten oder Comma-first style, wenn dein Projekt Kommata an den Zeilenanfang setzt.

Weil das Tool nach jeder Dropdown-Änderung automatisch neu formatiert, siehst du die Wirkung jeder Option sofort — du tastest dich so in wenigen Klicks an genau den Stil heran, den du brauchst.

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.