LFUnminify, Online-Formatter für minifizierten Code von Ludovic Frank

Minifizierten Code online lesbar formatieren

Füge minifiziertes JavaScript, CSS, HTML, XML oder JSON ein und erhalte übersichtlich eingerückten Code. Kostenlos und direkt in deinem Browser verarbeitet.

Hier erscheint dein lesbar formatierter Code

Code nach Format aufbereiten

Für jedes Format gibt es eine eigene Seite mit Hinweisen zu Syntax, Einsatzmöglichkeiten und Grenzen:

Was bedeutet Code-Minifizierung?

Entwickler schreiben Code auch für andere Menschen. Kommentare, Einrückungen, Leerzeilen zwischen Blöcken und aussagekräftige Variablennamen helfen dabei, ihn zu verstehen. Für die Ausführung im Browser ist vieles davon unnötig. Beim Minifizieren entfernt ein Build-Werkzeug deshalb überflüssige Leerzeichen, Zeilenumbrüche und Kommentare. Häufig kürzt es auch Variablen- und Funktionsnamen auf einzelne Buchstaben. Ziel ist eine kompaktere Datei mit demselben Programmverhalten. Wie bei anderen Änderungen am Build sollte dieses Verhalten durch Tests abgesichert werden.

Der Vorteil liegt in der geringeren Datenmenge: Eine kleinere JavaScript-Datei muss weniger Bytes über das Netzwerk übertragen und kann so die Ladezeit verbessern. Wie viel eingespart wird, hängt vom ursprünglichen Code, dem Minifizierer und der zusätzlich verwendeten Übertragungskompression ab. Deshalb liefern viele produktive Websites JS, CSS und HTML minifiziert aus. Wer eine solche Datei untersucht, sieht allerdings oft nur eine dichte, kaum lesbare Zeile. Eine lesbare Formatierung hilft dabei, den Code zu verstehen, Fehler zu untersuchen oder das Verhalten eines Skripts zu prüfen.

Was macht dieser Code-Formatter?

LFUnminify bringt minifizierten Code in eine übersichtliche Form. Das Werkzeug ergänzt Einrückungen und Zeilenumbrüche, gliedert verschachtelte Blöcke und setzt Abstände nach den Regeln des erkannten Formats. Aus einer einzigen Zeile mit Tausenden Zeichen wird eine strukturierte Darstellung, in der du suchen, Zusammenhänge verfolgen und einzelne Abschnitte leichter lesen kannst. Die Formatierung stellt dabei die Lesbarkeit wieder her, nicht den ursprünglichen Quelltext.

Im Hintergrund läuft Prettier, der Formatter, den die meisten JavaScript-Teams ohnehin verwenden, direkt in deinem Browser. Die Ausgabe entspricht daher dem, was dein eigener Editor aus einer normalen Quelldatei machen würde, und wirkt vertraut statt maschinell erzeugt. Die Erkennung erfolgt automatisch: Füge beliebigen Code ein, und das Werkzeug ermittelt, ob es sich um JavaScript, CSS, HTML, XML oder JSON handelt, bevor es ihn entsprechend formatiert.

Eine wichtige Grenze: Lesbar formatieren bedeutet nicht dekompilieren. Gelöschte Kommentare, ursprüngliche Variablennamen und Entwicklernotizen sind in einer minifizierten Datei nicht mehr enthalten und lassen sich durch Einrücken nicht wiederherstellen. Die kurzen Namen des Minifizierers bleiben bestehen. Die neue Struktur reicht aber oft aus, um Abläufe nachzuvollziehen, eine Funktion zu finden oder zu untersuchen, welche Daten ein Skript an welche Adresse sendet.

Unterstützte Codeformate

Ein Editor für fünf Formate: LFUnminify untersucht den eingefügten Inhalt und wählt automatisch einen passenden Formatter. Du musst kein Format im Menü auswählen. Die Erkennung orientiert sich am Inhalt statt an der Dateiendung, kann aber mehrdeutige Syntax falsch einordnen. Das angezeigte Format hilft dir, die Auswahl zu prüfen:

  • JavaScript mit moderner Syntax, ES-Modulen, asynchronem Code und JSX. Typische Eingaben sind Bundles aus webpack, Vite, esbuild oder Terser.
  • CSS mit benutzerdefinierten Eigenschaften, Media Queries und standardkonformen verschachtelten Regeln. Geeignet für kompilierte Stylesheets aus Tailwind, Sass oder PostCSS, sofern sie als CSS erkannt werden.
  • HTML, einschließlich eingebetteter script- und style-Blöcke, die zusammen mit dem Markup formatiert werden, statt als eine einzige lange Zeile stehen zu bleiben.
  • XML, darunter Sitemaps, RSS-Feeds, SVG-Dateien, SOAP-Nachrichten und Konfigurationsdateien, die ohne einen einzigen Zeilenumbruch angekommen sind.
  • JSON, einschließlich tief verschachtelter API-Antworten, Paketbeschreibungen, Konfigurationsdateien und Log-Daten.

Wann ein Formatter für minifizierten Code hilft

Minifizierten Code aufzubereiten ist meist ein Mittel, um eine konkrete Frage zu beantworten. Das gilt für fremden Code ebenso wie für eigene Dateien, deren kompilierte Ausgabe kaum noch lesbar ist:

  • Einen Fehler in der Produktion untersuchen. Ein Stacktrace verweist nur auf Zeile 1, Spalte 24815 eines Bundles. Eine formatierte Kopie erleichtert die Suche nach Funktionen und Ausdrücken. Die ursprünglichen Stacktrace-Positionen werden dabei nicht automatisch den neuen Zeilen zugeordnet.
  • Ein Skript eines Drittanbieters prüfen. Bevor du einen Analyse-Tag, ein Chat-Widget oder ein Affiliate-Skript einbindest, kannst du den Code formatieren und untersuchen, welche Daten er sammelt, welche Domains er anspricht und was er im Speicher ablegt.
  • Ein kompiliertes Stylesheet lesen. CSS-Frameworks erzeugen oft riesige Dateien mit sehr wenigen Zeilen. Eine übersichtliche Formatierung hilft dir, die Kaskade nachzuvollziehen, wirksame Regeln zu finden und zu verstehen, warum deine eigene Regel übergangen wird.
  • Eine API-Antwort untersuchen. Ein aus dem Netzwerk-Tab kopierter JSON-Datensatz ist in einer einzigen Zeile schwer zu lesen. Eingerückt werden Struktur, Verschachtelung und fehlende Felder deutlich leichter erkennbar.
  • Aus echtem Code lernen. Wenn du nachvollziehen möchtest, wie eine Bibliothek ein Problem löst, hilft eine gut lesbare Darstellung. Die formatierte Ausgabe macht das Lesen leichter, auch wenn ursprüngliche Namen und Kommentare fehlen.

So verwendest du LFUnminify

Du kannst Code auf drei Wegen öffnen: direkt in das linke Eingabefeld einfügen, über Datei auswählen eine lokale Datei laden oder eine Datei auf den Eingabebereich ziehen. Für eine Datei von einer Website öffnest du selbst den Seitenquelltext oder die Entwicklertools deines Browsers und kopierst den Inhalt hierher. Alternativ speicherst du die .js-, .css-, .html-, .xml- oder .json-Datei und öffnest sie über die Dateiauswahl.

Die Formatierung beginnt automatisch, sobald du kurz nicht mehr tippst. Das Werkzeug erkennt das Format und zeigt die aufbereitete Ausgabe rechts mit Syntaxhervorhebung an. Über Kopieren übernimmst du das gesamte Ergebnis in die Zwischenablage. Mit Herunterladen speicherst du es als Datei mit einer zum erkannten Format passenden Endung und kannst es anschließend in deinem eigenen Editor öffnen.

Zwei Kleinigkeiten, die bei langen Dateien helfen. Schalte die Zeilennummern ein, wenn du eine genaue Stelle benennen oder zwei Fassungen nebeneinander vergleichen musst. Deine Einstellung bleibt für den nächsten Besuch gespeichert. Und wenn das erkannte Format nicht das erwartete ist, ist das meist schon ein Hinweis: Eine Datei, die als JavaScript erkannt wird, obwohl du JSON erwartet hast, entpuppt sich oft als JSONP-Antwort oder als Konfiguration, die in eine Zuweisung verpackt ist.

Dein Code bleibt auf deinem Gerät

Die Formatierung läuft lokal in deinem Browser. Der dafür benötigte JavaScript-Code wird mit der Seite geladen. LFUnminify lädt deine Eingaben nicht auf einen Server hoch, stellt sie nicht in eine Warteschlange und speichert sie weder in einer Datenbank noch in einem Inhaltsprotokoll. Sobald alle benötigten Bestandteile geladen sind, kann die Formatierung auch ohne Netzwerkverbindung weiterarbeiten. Für die Verarbeitung deiner Dateien ist kein externer Formatierungsdienst erforderlich.

So kannst du auch internen Code, ein eigenes Bundle, ein Kundenprojekt oder eine Konfiguration untersuchen, ohne den Inhalt an einen Formatierungsserver zu übermitteln. Eingefügte und lokal geöffnete Dateien werden im Browser verarbeitet. Das Werkzeug ruft auch keine entfernten Dateien für dich ab. Du kopierst oder speicherst sie selbst und öffnest sie hier. Ein Konto ist nicht nötig, und der Inhalt deiner Eingaben wird nicht zur Nachverfolgung erfasst.

Warum ist LFUnminify kostenlos?

LFUnminify gehört zu einer Reihe kostenloser Werkzeuge von Ludovic Frank, darunter ein Passwortgenerator, ein Favicon-Generator und ein Werkzeug für Farbpaletten. Der Gedanke dahinter ist einfach: Kleine Helfer, die Entwickler regelmäßig brauchen, sollten ohne Anmeldung, Werbeschranke oder Guthaben verfügbar sein. LFUnminify verlangt kein Konto, begrenzt die Nutzung nicht durch ein Kontingent und bietet im Produkt kein kostenpflichtiges Upgrade an.

Die Werkzeuge zeigen zugleich, wie wir Anwendungen entwickeln. Jedes ist eine echte, gepflegte Anwendung, die nach denselben Maßstäben entsteht wie ein Kundenprojekt. Das vermittelt mehr über unsere Arbeit als eine reine Portfolioseite. Wenn du individuelle Webentwicklung, eine auf deine Anforderungen zugeschnittene Anwendung oder technische Beratung suchst, findest du uns über den Link in der Fußzeile.

Häufig gestellte Fragen

Kann ich aus einer minifizierten Datei den ursprünglichen Quelltext wiederherstellen?

Durch Formatieren allein nicht. Beim Minifizieren werden Kommentare entfernt und Variablen häufig umbenannt. Diese Informationen sind dann in der Datei nicht mehr vorhanden. LFUnminify ergänzt Einrückungen, Zeilenumbrüche und eine lesbare Gliederung, kann aber gelöschte Namen oder Kommentare nicht rekonstruieren. Eine separat verfügbare Source Map kann in den Entwicklertools bei der Zuordnung zum Original helfen, wenn sie die nötigen Quellen enthält oder darauf verweist. LFUnminify verarbeitet selbst keine Source Maps.

Wird mein Code an einen Server gesendet?

Nein. Die Formatierung läuft vollständig in deinem Browser mit dem JavaScript-Code, der zusammen mit der Seite geladen wird. Deine Eingaben werden dabei weder hochgeladen noch serverseitig gespeichert oder protokolliert. Unser Server ruft auch keine Dateien für dich ab. Wenn du eine Datei einer Website untersuchen möchtest, kopierst oder speicherst du sie selbst und öffnest sie hier lokal.

Welche Formate werden unterstützt?

JavaScript, CSS, HTML, XML und JSON. Das Format wird automatisch anhand des Inhalts erkannt, du musst also keines auswählen, und jede Sprache wird von dem Parser verarbeitet, der für sie entwickelt wurde. JavaScript umfasst moderne Syntax einschließlich ES-Modulen und JSX, CSS umfasst benutzerdefinierte Eigenschaften und verschachtelte Regeln, und XML reicht von Sitemaps und RSS-Feeds bis zu SVG-Dateien.

Gibt es eine Größenbegrenzung?

Für eingefügte oder lokal geöffnete Inhalte gibt es keine fest eingestellte Größenbegrenzung. Die praktische Grenze hängt aber von deinem Gerät, dem verfügbaren Arbeitsspeicher und der Struktur der Datei ab. Große Bundles können lange brauchen und die Browseroberfläche vorübergehend blockieren. Öffne bei Bedarf einen kleineren Ausschnitt. Über die Dateiauswahl oder per Drag-and-drop geladene Dateien werden ebenfalls lokal gelesen und nicht hochgeladen.

Was ist der Unterschied zwischen Unminify und Beautify?

In der Praxis beschreiben beide Begriffe denselben Vorgang, und dieses Werkzeug erledigt beides zugleich. Unminify meint meist, einen Build-Schritt rückgängig zu machen, der die Datei komprimiert hat. Beautify meint, beliebigen Code, ob minifiziert oder nicht, nach einheitlichen Stilregeln neu zu formatieren. Da LFUnminify Prettier auf die Eingabe anwendet, kannst du damit auch schlecht eingerückten Code aufräumen, der nie minifiziert wurde.

Kann ich verschleiertes JavaScript damit bearbeiten?

Du kannst es formatieren, und das ist oft ein nützlicher erster Schritt. Die Verschleierung selbst wird dadurch nicht aufgehoben. Obfuscatoren gehen über Minifizierung hinaus: Sie kodieren Zeichenketten, verändern den Kontrollfluss und fügen absichtlich unbenutzten Code ein. Durch Einrückungen erkennst du die Struktur leichter und kannst Abläufe besser untersuchen. Die gezielt eingebauten Hindernisse bleiben jedoch erhalten.