Formatowanie HTML online
Zmień skompresowane źródło strony w czytelny kod HTML. Znaczniki są wcinane zgodnie z głębokością zagnieżdżenia, atrybuty rozmieszczane przejrzyście, a osadzone skrypty i style formatowane razem z dokumentem.
Dlaczego źródło strony wygląda właśnie tak?
Minifikatory HTML redukują białe znaki między znacznikami, usuwają komentarze, pomijają opcjonalne znaczniki zamykające i usuwają cudzysłowy wokół wartości atrybutów, które ich nie wymagają. Szablony przetwarzane na serwerze dodatkowo komplikują obraz: strona złożona z dziesiątek fragmentów dociera jako jeden strumień, bez widocznego związku z plikami, które ją utworzyły. Otwórz źródło niemal dowolnej witryny produkcyjnej, a zobaczysz dokument z kilkoma ogromnymi wierszami, w którym znalezienie znacznika zamykającego sekcję wymaga ręcznego liczenia nawiasów ostrych.
Najważniejsza jest struktura
HTML ma strukturę drzewa, a drzewo trudno odczytać, gdy zostanie spłaszczone. Wcięcia odpowiadające głębokości zagnieżdżenia od razu pokazują kształt dokumentu: gdzie kończy się nagłówek, który kontener otacza główną treść, jak głęboko znajduje się komponent i gdzie warto sprawdzić nietypowe zagnieżdżenie. Dlatego sformatowane źródło pomaga kontrolować kolejność nagłówków, analizować kod wygenerowany przez framework lub zrozumieć, jak zbudowano interesującą sekcję konkurencyjnej witryny. Wybierz źródło odpowiadające Twojemu pytaniu. Zapisany kod strony przedstawia HTML dostarczony przez serwer, a kod skopiowany z panelu Elements może zawierać zmiany wprowadzone przez skrypty po stronie klienta. Formatowanie nie uzgadnia tych dwóch widoków ani nie odtwarza DOM działającej strony. Szukając przyczyny pojawienia się nieoczekiwanego elementu, porównaj źródło z aktywnym dokumentem i sprawdź skrypt, który go dodaje. Podobnie czytelna struktura nagłówków ułatwia ręczny przegląd, ale nie zastępuje audytu dostępności całej strony.
Osadzone skrypty i style również
Prawdziwa strona prawie nigdy nie składa się z samych znaczników. Fragmenty kodu analitycznego, dane strukturalne JSON-LD, obiekty konfiguracyjne i krytyczny CSS są osadzone bezpośrednio w dokumencie, a minifikator kompresuje także je. Formatter przetwarza każdy osadzony blok odpowiednim parserem: znacznik script zawierający zminifikowany JavaScript staje się czytelnym kodem JavaScript, znacznik style staje się czytelnym kodem CSS, a wszystko to wewnątrz poprawnie wciętego dokumentu.
Sprawdź treść wrażliwą na białe znaki
Białe znaki mogą wpływać na wyświetlanie HTML, zwłaszcza przy tekście liniowym i wewnątrz elementów takich jak pre i textarea. Formatter stosuje reguły uwzględniające typowe zachowanie białych znaków w HTML, ale formatowanie nie jest testem regresji wizualnej. Zachowaj oryginalną stronę i sprawdź wynik w rzeczywistym kontekście przed publikacją zmian. Układ zależy również od arkuszy stylów, skryptów i zachowania przeglądarki, których narzędzie nie ocenia. Sformatowana kopia pomaga czytać dokument podczas analizy, lecz nie dowodzi, że strona będzie wyglądać identycznie.
Najczęściej zadawane pytania
Czy mogę wkleić całe źródło strony?
Tak. Skopiuj źródło z przeglądarki za pomocą view-source albo zapisz stronę i otwórz plik, a sformatowany zostanie cały dokument, w tym head, body, osadzone skrypty i dane strukturalne.
Czy formatowanie zmieni wygląd strony?
Formatter stara się zachować znaczące białe znaki HTML, ale przed publikacją nadal należy porównać wynik. Odstępy mogą mieć znaczenie dla tekstu liniowego, treści preformatowanej i jej współdziałania ze stylami. Zachowaj oryginalną kopię i sprawdź wyświetlanie w projekcie, w którym kod jest rzeczywiście używany.
Czy narzędzie obsługuje szablony Twig lub Blade?
Edytor jest przeznaczony do HTML dostarczanego przeglądarce. Twig, Blade i inne języki szablonów wprowadzają składnię, którą formatter HTML może odrzucić lub obsłużyć w nieoczekiwany sposób. Aby uzyskać wiarygodny widok wygenerowanego kodu, przetwórz szablon w projekcie i sformatuj wynikowy dokument HTML.