Wie HTML-Beautification funktioniert
Der Beautifier liest dein Markup Tag für Tag, verfolgt, wie tief jedes Element verschachtelt ist, und gibt es mit konsistenter Einrückung neu aus. Er ändert nie, was die Seite rendert — nur wie der Quellcode aufgebaut ist.
- Die Tags analysieren. Die Bibliothek scannt deine Eingabe in einen Strom von Tokens: öffnende Tags, schließende Tags, Textinhalt, Kommentare und den Inhalt von Script- und Style-Blöcken. Attributwerte in Anführungszeichen sowie der Inhalt von pre- und textarea-Elementen werden als einzelne Einheiten behandelt, sodass die Leerzeichen darin unangetastet bleiben.
- Verschachtelung verfolgen. Während der Beautifier den Token-Strom durchläuft, hält er einen laufenden Einrückungsgrad vor. Jedes öffnende Tag, das nicht selbstschließend ist, erhöht den Grad um eine Stufe; jedes zugehörige schließende Tag senkt ihn. Diese Tiefe bestimmt, wie viele Einrückungseinheiten vor jeder zurückgegebenen Zeile stehen.
- Deine Optionen anwenden. Deine Einrückungswahl — 2 Leerzeichen, 4 Leerzeichen oder ein Tabulator — legt die Breite einer Ebene fest. Der Umbruch-bei-Spalte-Wert bricht lange Attribut- oder Textzeilen ab, sobald sie die gewählte Spalte überschreiten. Das Leerzeilen-Limit komprimiert lange Leerzeilen-Folgen auf das eingestellte Maximum.
- Das Markup neu ausgeben. Schließlich druckt der Formatter die Tags mit den berechneten Einrückungen und Zeilenumbrüchen aus. Wenn du inline Formatierung aktiviert hast, durchläuft der Inhalt jedes Style-Blocks den CSS-Formatter und jeder Script-Block den JS-Formatter, sodass der eingebettete Code mit dem umgebenden Markup ausgerichtet ist.
Warum HTML verschönern
- Minifizierte Seiten lesen. Produktions-HTML wird ohne Zeilenumbrüche ausgeliefert, um Bytes zu sparen. Verschönern bringt die Struktur zurück, sodass du den gesuchten Abschnitt finden, ein fehlendes schließendes Tag erkennen und nachvollziehen kannst, wie das Dokument tatsächlich verschachtelt ist.
- Inkonsistente Templates bereinigen. Markup, das mehrere Personen bearbeitet haben, driftet in gemischte Einrückungen und Tag-Positionen. Ein Durchlauf durch den Beautifier normalisiert die gesamte Datei, sodass das nächste Commit die gemachte Änderung zeigt statt einer Wand neu formatierter Leerzeichen.
- Verlangsamt deine Seite nicht. Die meisten Online-Formatter laden ihre gesamte Bibliothek, sobald du die Seite öffnest. Dieser lädt js-beautify erst, wenn du auf Verschönern klickst oder den Live-Modus einschaltest, sodass der erste Ladevorgang ein paar Kilobytes statt einiger Hundert kostet und die Seite schnell bleibt.
- Nichts verlässt deinen Browser. Alles läuft auf deinem Gerät. Dein Markup wird nie auf einen Server hochgeladen, was wichtig ist, wenn die Seite einem Kunden gehört, interne URLs enthält oder unter eine Vertraulichkeitsvereinbarung fällt.
Häufige Anwendungen
HTML verschönern wird immer dann nötig, wenn jemand Markup lesen muss, das nicht zum Lesen geschrieben wurde.
- Eine Live-Seite untersuchen: den minifizierten Quelltext aus Seitenquelltext anzeigen einfügen, um das Markup hinter einem Layout-Fehler zu finden, den man lokal nicht reproduzieren kann.
- CMS-Ausgabe bereinigen: ein Template neu formatieren, das ein Page-Builder einzeilig exportiert hat, bevor es zurück ins Repository eingecheckt wird.
- Barrierefreiheits- und SEO-Überprüfungen: das Dokument auffalten, um Überschriftenreihenfolge, Landmark-Struktur und Alt-Attribute am echten DOM zu prüfen.
Ein praktisches Beispiel
Nimm ein minifiziertes Fragment: <div><p>hi</p><span>x</span></div>. Füge es oben mit 2 Leerzeichen Einrückung ein und klicke auf Verschönern. Du erhältst einen lesbaren Block zurück: das <div> auf einer eigenen Zeile, das <p>hi</p> und das <span>x</span> jeweils um eine Ebene eingerückt, und das zugehörige </div> darunter ausgerichtet. Wechsle die Einrückung zu Tabulatoren und jede Ebene wechselt von zwei Leerzeichen zu einem Tabulator-Zeichen. Füge einen <style>a{color:red}</style>-Block hinzu, aktiviere «Inline CSS und JS ebenfalls formatieren» und die Regel wird auf eigene eingerückte Zeilen ausgedehnt statt auf einer zu bleiben.
FAQ
Läuft das in meinem Browser?
Ja. Die js-beautify-Bibliothek wird lazy geladen, wenn du zum ersten Mal auf Verschönern klickst oder den Live-Modus aktivierst, dann gecacht. Dein Markup verlässt die Seite nie — kein Server-Roundtrip, kein Upload.
Verändert Verschönern das Rendering meiner Seite?
Nein. Der Beautifier fügt nur Leerzeichen und Zeilenumbrüche zwischen Tags hinzu und entfernt sie. Der Browser ignoriert diese Leerzeichen beim Aufbau der Seite, sodass das gerenderte Ergebnis identisch ist. Das Einzige, worauf man achten sollte, ist leerraumempfindlicher Inhalt innerhalb von pre, textarea oder inline Elementen, den der Formatter absichtlich unberührt lässt.
Was macht der Schalter für inline CSS und JS?
Ausgeschaltet bleibt der Inhalt von Style- und Script-Blöcken genau so, wie du ihn eingefügt hast. Eingeschaltet durchläuft das CSS innerhalb jedes Style-Blocks den CSS-Formatter und das JavaScript innerhalb jedes Script-Blocks den JS-Formatter, sodass der eingebettete Code mit der umgebenden Markup-Einrückung übereinstimmt.
Was macht «Umbruch bei Spalte»?
Er legt die Zeilenlänge fest, bei der ein Tag mit vielen Attributen oder ein langer Text auf mehrere Zeilen aufgeteilt wird. Bei 0 lassen bleibt jedes Element auf einer einzigen Zeile, unabhängig von der Länge. Auf 80 oder 120 setzen und der Formatter bricht alles um, was diese Spalte überschreitet, was breite Elemente in einem schmalen Editor lesbar hält.
Browser-seitige HTML-Beautification gibt dir lesbares Markup ohne Buildschritt oder Upload. Füge eine minifizierte oder unübersichtliche Seite ein, wähle deine Einrückung und Umbruchbreite, entscheide, ob du inline CSS und JS neu formatierst, dann kopiere oder lade das Ergebnis herunter. Nichts verlässt dein Gerät, kein Konto ist nötig und die Bibliothek lädt nur, wenn du sie anforderst — das Öffnen dieser Seite kostet dir ein paar Kilobytes, nicht ein Megabyte.