JavaScript online lesbar formatieren
Füge eine minifizierte .js-Datei, ein webpack-Bundle oder ein einzeiliges Codefragment ein. Rechts erhältst du übersichtlich eingerücktes JavaScript. Prettier übernimmt die Formatierung direkt in deinem Browser, ohne deinen Code hochzuladen.
Warum JavaScript oft kaum lesbar ankommt
Viele moderne Build-Prozesse minifizieren JavaScript vor der Veröffentlichung. Werkzeuge wie Terser, esbuild oder SWC entfernen Leerzeichen und Kommentare, kürzen lokale Variablen- und Funktionsnamen und fassen Ausdrücke zusammen. Bundler bündeln zusätzlich viele Quelldateien in wenige Ausgabedateien. Eine React-Anwendung aus Hunderten übersichtlichen Dateien kann dadurch als eine einzige lange Zeile im Browser ankommen. Das Programm soll sich weiterhin gleich verhalten, doch beim Lesen fehlen die visuellen Anhaltspunkte, an denen sich Funktionen, Bedingungen und zusammengehörige Abschnitte erkennen lassen.
Was die Formatierung sichtbar macht
Ein formatiertes Bundle lässt sich leichter durchsuchen und verstehen. Zeilenumbrüche und Einrückungen zeigen, wo eine Funktion beginnt und endet, welche Anweisungen zu einer Bedingung gehören und wie Rückruffunktionen miteinander verschachtelt sind. Zeichenketten, URLs und Namen von Endpunkten fallen schneller ins Auge, was besonders bei der Prüfung fremder Skripte hilft. Ein Stacktrace aus der minifizierten Datei verweist allerdings weiterhin auf deren ursprüngliche Positionen. LFUnminify ordnet diese nicht den neuen Zeilen zu; für eine solche Zuordnung sind passende Source Maps und Entwicklertools erforderlich. Bei einer Untersuchung kannst du zunächst nach einer bekannten Fehlermeldung, einem Endpunkt oder einem noch erhaltenen Funktionsnamen suchen. Lies dann den umgebenden Block und verfolge seine Aufrufe. Behalte das minifizierte Original zum Vergleich, denn Zeilen- und Spaltenangaben beziehen sich nach dem Formatieren auf andere Stellen. Die Darstellung führt den Code nicht aus und erklärt auch nicht automatisch seine Absicht. Sie gibt dir eine übersichtliche Grundlage, um diese Fragen selbst zu beantworten.
Unterstützung für moderne Syntax
Der Formatter versteht moderne JavaScript-Syntax: Pfeilfunktionen, Klassen, async und await, Generatoren, optionale Verkettung, den Nullish-Coalescing-Operator, Template-Literale, Destrukturierung, Spread-Syntax, dynamische Imports und ES-Module. Auch JSX wird unterstützt, etwa wenn du eine React-Komponente untersuchst, deren JSX noch nicht umgewandelt wurde. Prettier erzeugt eine konsistente Darstellung, wie sie viele Entwicklungsumgebungen ebenfalls verwenden. Das genaue Ergebnis hängt von den hier verwendeten Einstellungen ab und muss daher nicht mit deiner eigenen Editor-Konfiguration übereinstimmen.
Die Grenzen der Wiederherstellung
Formatierung stellt keinen ursprünglichen Quelltext wieder her. Ein Minifizierer kann Kommentare löschen und remainingRetries in n umbenennen; der Formatter kann den früheren Namen daraus nicht ableiten. Falls das Projekt eine passende Source Map veröffentlicht hat, kannst du sie in den Entwicklertools nutzen. Ob du damit den Originaltext erhältst, hängt von den enthaltenen oder verfügbaren Quelldateien ab. LFUnminify nutzt solche Zuordnungen nicht. Bei absichtlich verschleiertem Code wird zwar die Struktur lesbarer, kodierte Zeichenketten und schwer nachvollziehbare Kontrollflüsse bleiben jedoch bestehen.
Häufig gestellte Fragen
Kann ich ein webpack- oder Vite-Bundle formatieren?
Ja. Füge das Bundle ein oder öffne die Datei über Datei auswählen. Es wird wie anderer erkannter JavaScript-Code formatiert, sodass Funktionen und verschachtelte Blöcke leichter lesbar sind. Die ursprünglichen Module werden dadurch nicht wiederhergestellt. Bei großen Bundles hängt die Dauer von deinem Gerät ab; sie können die Browseroberfläche vorübergehend blockieren.
Wird verschleiertes JavaScript entschlüsselt?
Nein. Die Formatierung macht die Struktur übersichtlicher, hebt aber die Verschleierung nicht auf. Kodierte Zeichenketten, künstlich verkomplizierte Kontrollflüsse und absichtlich eingefügter unbenutzter Code bleiben erhalten. Das Ergebnis kann dir bei der weiteren Untersuchung helfen, ersetzt aber keine Analyse der Verschleierung.
Kann die Formatierung meinen Code verändern?
Prettier soll das Verhalten erhalten, kann neben Abständen und Zeilenumbrüchen aber auch die Schreibweise ändern, etwa Anführungszeichen oder Semikolons. Eine allgemeine Garantie für beliebige Eingaben gibt es nicht. Arbeite mit einer Kopie und führe deine üblichen Tests aus, bevor du die formatierte Ausgabe wieder in einer Anwendung verwendest.