Jak działa upiększanie HTML
Upiększacz czyta markup tag po tagu, śledzi głębokość zagnieżdżenia każdego elementu i emituje go ponownie ze spójnymi wcięciami. Nigdy nie zmienia tego, co strona renderuje — tylko to, jak wygląda kod źródłowy.
- Parsowanie tagów. Biblioteka skanuje wejście do strumienia tokenów: otwierające tagi, zamykające tagi, treść tekstowa, komentarze oraz zawartość bloków script i style. Wartości atrybutów w cudzysłowach i treść elementów pre oraz textarea są traktowane jako pojedyncze jednostki, więc białe znaki wewnątrz nich pozostają nienaruszone.
- Śledzenie zagnieżdżenia. Przechodząc przez strumień tokenów, upiększacz utrzymuje bieżący poziom wcięcia. Każdy otwierający tag, który nie jest samo-zamykający, pogłębia poziom o jeden krok; każdy pasujący zamykający tag cofa go. Ta głębokość decyduje o liczbie jednostek wcięcia przed każdą zwracaną linią.
- Zastosowanie opcji. Wybór wcięcia — 2 spacje, 4 spacje lub tabulator — wyznacza szerokość jednego poziomu. Wartość zawijania przy kolumnie łamie długie linie atrybutów lub tekstu po przekroczeniu wybranej kolumny. Limit pustych linii zwija długie ciągi pustych wierszy do wybranego przez Ciebie limitu.
- Ponowna emisja markup. Na końcu formater drukuje tagi z powrotem z obliczonymi wcięciami i podziałami linii. Jeśli włączono formatowanie inline, zawartość każdego bloku style przechodzi przez formater CSS, a każdego bloku script — przez formater JS, więc osadzony kod wyrównuje się z otaczającym markupem.
Dlaczego upiększać HTML
- Czytanie zminifikowanych stron. Produkcyjny HTML jest dostarczany bez podziałów linii, by oszczędzić bajty. Upiększanie przywraca strukturę, dzięki czemu możesz znaleźć szukaną sekcję, wykryć brakujący zamykający tag i śledzić faktyczne zagnieżdżenie dokumentu.
- Porządkowanie niekonsekwentnych szablonów. Markup edytowany przez wiele osób dryfuje w mieszane wcięcia i rozmieszczenie tagów. Jeden przebieg przez upiększacz normalizuje cały plik, więc następny commit pokazuje dokonaną zmianę, a nie ścianę przeformatowanych białych znaków.
- To narzędzie nie obciąża Twojej strony. Większość online'owych formaterów ładuje całą bibliotekę w momencie otwarcia strony. Ten pobiera js-beautify dopiero gdy klikniesz Upiększ lub włączysz tryb na żywo, więc otwarcie strony kosztuje kilka kilobajtów zamiast kilkuset, a strona pozostaje szybka.
- Nic nie opuszcza przeglądarki. Całość działa na Twoim urządzeniu. Twój markup nigdy nie jest wysyłany na serwer, co ma znaczenie, gdy strona należy do klienta, zawiera wewnętrzne URL-e lub jest objęta umową o poufności, którą podpisałeś.
Typowe zastosowania
Upiększanie HTML pojawia się zawsze, gdy ktoś musi przeczytać markup, który nie był pisany z myślą o czytaniu.
- Inspekcja działającej strony: wklej zminifikowane źródło z View Source, by znaleźć markup stojący za błędem układu, którego nie możesz odtworzyć lokalnie.
- Czyszczenie wyjścia CMS: przeformatuj szablon wyeksportowany przez kreator stron w jednej linii przed commitem do repozytorium.
- Przeglądy dostępności i SEO: rozwiń dokument, by sprawdzić kolejność nagłówków, strukturę landmark i atrybuty alt względem prawdziwego DOM.
Przykład krok po kroku
Weź zminifikowany snippet: <div><p>hi</p><span>x</span></div>. Wklej go powyżej z wcięciem ustawionym na 2 spacje, następnie kliknij Upiększ. Otrzymasz czytelny blok: <div> w własnej linii, <p>hi</p> i <span>x</span> każdy wcięty o jeden poziom, a pasujący </div> wyrównany poniżej. Przełącz wcięcie na Tabulatory, a każdy poziom zmieni dwie spacje na znak tabulacji. Dodaj blok <style>a{color:red}</style>, włącz "Formatuj też inline CSS i JS", a reguła rozwiną się do własnych wcięciętych linii zamiast pozostać w jednej.
FAQ
Czy to działa w mojej przeglądarce?
Tak. Biblioteka js-beautify jest pobierana za pierwszym razem, gdy klikniesz Upiększ lub włączysz tryb na żywo, a następnie buforowana. Twój markup nigdy nie opuszcza strony — nie ma żadnego round-tripu do serwera ani uploadu.
Czy upiększanie zmieni sposób renderowania mojej strony?
Nie. Upiększacz tylko dodaje i usuwa białe znaki i podziały linii między tagami. Przeglądarka ignoruje te białe znaki budując stronę, więc wyrenderowany wynik jest identyczny. Jedyna rzecz, na którą warto uważać, to treść wrażliwa na białe znaki wewnątrz pre, textarea lub elementów inline, którą formater celowo pozostawia niezmienioną.
Co robi przełącznik inline CSS i JS?
Przy wyłączonym, zawartość bloków style i script pozostaje dokładnie taka, jak ją wklejono. Po włączeniu CSS wewnątrz każdego bloku style przechodzi przez formater CSS, a JavaScript wewnątrz każdego bloku script — przez formater JS, więc osadzony kod jest wcięty tak, by pasował do otaczającego markup.
Co robi opcja "Zawijaj przy kolumnie"?
Ustawia długość linii, przy której tag z wieloma atrybutami lub długi ciąg tekstu zostaje złamany na wiele linii. Pozostaw 0, by każdy element był w jednej linii bez względu na długość. Ustaw 80 lub 120, a formater zawinie wszystko przekraczające tę kolumnę, utrzymując szerokie elementy czytelnymi w wąskim edytorze.
Przeglądarkowe upiększanie HTML daje czytelny markup bez kroku budowania ani uploadu. Wklej zminifikowaną lub nieuporządkowaną stronę, wybierz wcięcie i szerokość zawijania, zdecyduj czy przeformatować inline CSS i JS, a następnie skopiuj lub pobierz wynik. Nic nie opuszcza Twojego urządzenia, nie ma konta, a biblioteka ładuje się tylko wtedy, gdy o to poprosisz — więc otwarcie tej strony kosztuje kilka kilobajtów, nie megabajt.