JPKCom DB

Beautify

JavaScript, CSS, HTML und JSON im Browser formatieren und gepackten Code ohne Ausführung entpacken — der Einstieg zu Manual, Beispielen und Tipps.

Minifizierter Code, wieder lesbar gemacht

Beautify nimmt zusammengestauchten, in eine Zeile gepressten oder bewusst unleserlich gemachten Quelltext und gibt ihn sauber eingerückt und formatiert zurück. Du kennst die Situation: Eine min.js aus einem Build, ein CSS-Blob aus dem DevTools-Inspector oder ein HTML-Fragment ohne einen einzigen Zeilenumbruch — alles technisch korrekt, aber für Menschen kaum zu entziffern. Beautify dreht das um.

Du fügst den Code ins Editor-Feld ein, klickst auf Beautify (oder drückst Strg+Enter), und bekommst formatierten Code zurück — direkt im selben Editor, bereit zum Kopieren oder Herunterladen. Die Sprache erkennt das Tool automatisch — auch JSON; du kannst sie bei Bedarf aber fest auf JavaScript, CSS oder HTML stellen. Gefällt dir das Ergebnis nicht, holt dir Strg+Z im Code-Editor den unformatierten Code in einem Schritt zurück.

Gedacht ist Beautify für alle, die mit fremdem oder ausgeliefertem Code arbeiten: Entwicklerinnen und Entwickler, die eine Minified-Datei aus Produktion nachvollziehen wollen; Frontend-Leute, die kopiertes CSS oder HTML in eine einheitliche Form bringen; und alle, die einen Schnipsel aus einer Konsole, einem Bug-Report oder einer Bibliothek lesbar machen müssen, bevor sie damit weiterarbeiten.

Was Beautify kann

Die Funktionen lassen sich in drei Gruppen fassen:

  • Formatieren — JavaScript, CSS und HTML werden neu eingerückt und umgebrochen. Über die Optionen steuerst du Einrückung (Tab oder 2, 3, 4 bzw. 8 Leerzeichen, voreingestellt sind 4), erlaubte Leerzeilen, Zeilenumbruch-Länge, Klammer-Stil und elf Schalter wie „Comma-first style", „Break chained methods" oder „Keep array indent". Alle diese Optionen stellt die Bibliothek js-beautify bereit.
  • Entpacken und deobfuskieren — Mit der Option Detect packers erkennt das Tool zwei verbreitete Pack-Verfahren und entpackt sie, bevor es formatiert: das klassische P.A.C.K.E.R.-Format (eval(function(p,a,c,k,e,d)…) und URL-encodierten Code. Das geschieht musterbasiert und ohne den gepackten Code auszuführen — der Entpacker dekodiert nur die Symboltabelle. Es ist keine KI im Spiel, sondern das Rückgängigmachen bekannter Pack-Verfahren.
  • Ein-/Ausgabe — Datei per Knopfdruck hochladen (.js, .css, .html, .json und mehr), das Ergebnis in die Zwischenablage kopieren oder als Datei herunterladen (im Code-Editor auch per Strg+S). Der Editor (ACE im Dracula-Farbschema) bringt Syntax-Highlighting und Zeilennummern mit; bei Bedarf schaltest du auf ein schlichtes Textfeld um. Code und Einstellungen überstehen ein Neuladen der Seite.

JSON und JSONP werden über den JavaScript-Formatierer mitverarbeitet — gültiges JSON ist gültiges JavaScript, deshalb wird es sauber eingerückt, und die Automatik erkennt es von selbst. Eine eigene JSON-Validierung ist das nicht; dafür gibt es den JSON Editor.

Architektur und Datenschutz

Beautify läuft vollständig in deinem Browser. Der Code, den du einfügst oder hochlädst, wird nicht an einen Server gesendet — das Formatieren und Entpacken erledigen JavaScript-Bibliotheken (js-beautify und die Entpacker) lokal auf deinem Rechner. Auch der Datei-Upload liest die Datei nur lokal ein. Das macht das Tool unbedenklich für proprietären oder vertraulichen Code: Er verlässt deinen Browser nicht.

Damit nach einem Neuladen nichts verloren geht, merkt sich Beautify den Editor-Inhalt und alle Optionen im lokalen Speicher deines Browsers (localStorage). Auch das bleibt auf deinem Rechner — mit Clear leerst du den Editor und damit den gespeicherten Code.

Jetzt ausprobieren

→ Beautify öffnen — Code einfügen, Beautify klicken (oder Strg+Enter), formatiertes Ergebnis kopieren. Ohne Account, kostenlos, direkt im Browser.

Verwandte JPKCom-Tools

Beautify formatiert — diese Tools decken die angrenzenden Aufgaben ab:

  • Compiler — die Gegenrichtung: HTML, JavaScript und CSS minifizieren (und auch beautifyen), SCSS und Sass zu CSS kompilieren. Das Tool selbst verweist unter dem Editor darauf.
  • Coder — HTML-Entities, URLs, Base64, JWT und Data-URIs en- und decodieren, bevor du den Klartext durch Beautify schickst.
  • Source — den Quelltext einer Seite abrufen, um ihn anschließend hier lesbar zu machen.

Tiefer geht es auf den Unterseiten: das Manual mit jeder Option im Detail, Beispiele aus der Praxis und gesammelte Tipps & Tricks.