Beautify
JavaScript-, CSS- und HTML-Code im Browser formatieren, entpacken und deobfuskieren — der Einstieg zu Manual, Beispielen und Tipps zu Beautify.
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; du kannst sie bei Bedarf aber auch fest auf JavaScript, CSS oder HTML stellen.
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 (Tabs oder 2 bis 8 Leerzeichen), erlaubte Leerzeilen, Zeilenumbruch-Länge, Klammer-Stil und elf Detail-Schalter wie „Comma-first", „Break chained methods" oder „Keep array indent".
- Entpacken und deobfuskieren — Mit der Option Detect packers erkennt das Tool gängige JavaScript-Packer und entpackt sie, bevor es formatiert: das klassische P.A.C.K.E.R.-Format (
eval(function(p,a,c,k,e,d)…), URL-encodierten Code und MyObfuscate. Das geschieht musterbasiert — es ist keine KI im Spiel, sondern das Rückgängigmachen bekannter Pack-Verfahren. - Ein-/Ausgabe — Datei per Knopfdruck hochladen (
.js,.css,.html,.jsonund mehr), das Ergebnis in die Zwischenablage kopieren oder als Datei herunterladen. Der Editor (CodeMirror) bringt Syntax-Highlighting und Zeilennummern mit; bei Bedarf lässt sich auf ein schlichtes Textfeld umschalten.
JSON und JSONP werden über den JavaScript-Formatierer mitverarbeitet — gültiges JSON ist gültiges JavaScript, deshalb wird es sauber eingerückt. Eine eigene JSON-Validierung ist das nicht; dafür gibt es das JSON-Editor-Tool.
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.
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), SASS/SCSS zu CSS kompilieren.
- 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.