Formater HTML
Działa w całości w Twojej przeglądarce. Twoje pliki i dane nigdy nie opuszczają Twojego urządzenia.
O tym narzędziu
Wklej dokument albo fragment HTML, a narzędzie sformatuje go z czytelnymi wcięciami albo ściśnie do jednej zwartej linii.
Co się dzieje z niepoprawnym kodem?
Nic się nie psuje. Formater korzysta z biblioteki js-beautify, która działa na tokenach zamiast budować ścisłe drzewo DOM, więc niezamknięte znaczniki, niedopasowane znaczniki zamykające czy kod bez <head> i tak zostaną wcięte zamiast wywołać błąd. Do wyboru masz wcięcia po 2 spacje, 4 spacje albo tabulator. Minifikacja działa podobnie: to zestaw operacji tekstowych, które usuwają komentarze i zwijają białe znaki między znacznikami, a niezamknięty czy źle zagnieżdżony kod zostawiają bez zmian zamiast próbować go naprawić. W obu przypadkach możesz uporządkować niechlujny HTML bez wcześniejszego wyłapywania każdego zepsutego znacznika.
Jedno, o co minifikacja szczególnie dba, to zawartość elementów <pre>, <textarea>, <script> i <style>. Białe znaki wewnątrz tych znaczników albo mają znaczenie (podziały wierszy w bloku <pre>), albo są częścią kodu, który zwinięcie mogłoby zepsuć (JavaScript lub CSS wpisane bezpośrednio w kod). Dlatego narzędzie pomija te bloki i dotyka jedynie białych znaków między zwykłymi znacznikami.
Czy coś z tego jest wysyłane gdziekolwiek?
Nie. Formatowanie i minifikacja odbywają się w całości w przeglądarce, dzięki bibliotece js-beautify wczytanej do strony, nic nie trafia na żaden serwer. Oznacza to, że szablony stron, kod e-maili czy zeskrobane fragmenty z prawdziwymi danymi klientów mogą przejść przez to narzędzie bez opuszczania twojego komputera.
Do czego się to przydaje?
Typowe zastosowania to porządkowanie zminifikowanej strony zapisanej przez „pokaż źródło”, żeby dało się ją w ogóle przeczytać, zmniejszanie rozmiaru szablonu e-maila HTML przed wysyłką albo przeformatowanie kodu komponentu na spójną szerokość wcięć przed code review. Działa też w drugą stronę: jeśli masz ręcznie pisany HTML z niespójnymi odstępami i potrzebujesz jednej zwartej linii do wklejenia w wartość konfiguracji albo atrybut data-*, minifikacja robi to za jednym razem.
Przełączanie się między dwoma trybami to też szybki sposób na porównanie dwóch wersji strony, bo narzędzia do porównywania różnic radzą sobie znacznie lepiej ze spójnie sformatowanym kodem niż z mieszanką stylów wcięć. Jeśli utrzymujesz statyczną stronę albo bibliotekę komponentów, przepuszczenie wygenerowanego lub wklejonego HTML przez to narzędzie przed commitem utrzymuje spójny wygląd całego kodu, nawet gdy poszczególne fragmenty pochodzą z różnych źródeł.