Zpřehlednění HTML online
Převeďte zhuštěný zdrojový kód stránky do čitelné podoby. Značky se odsadí podle hloubky vnoření, atributy se přehledně rozloží a vložené skripty a styly se naformátují spolu s dokumentem.
Proč zdrojový kód stránky vypadá takto
Minifikátory HTML zhušťují bílé znaky mezi značkami, odstraňují komentáře, vynechávají nepovinné uzavírací značky a odstraňují uvozovky u hodnot atributů, které je nepotřebují. Šablony zpracovávané na serveru k nepřehlednosti přispívají: stránka složená z desítek dílčích šablon dorazí jako jediný proud bez zjevné vazby na soubory, ze kterých vznikla. Otevřete zdrojový kód téměř libovolného produkčního webu a najdete dokument s několika obrovskými řádky, v němž hledání uzavírací značky sekce znamená počítání ostrých závorek očima.
Vše stojí na struktuře
HTML tvoří strom a strom se ve zploštěném zápisu špatně čte. Odsazení podle hloubky vnoření okamžitě ukáže tvar dokumentu: kde končí záhlaví, který kontejner obaluje hlavní obsah, jak hluboko je komponenta a kde je třeba prozkoumat nečekané vnoření. Naformátovaný zdroj tak pomáhá kontrolovat pořadí nadpisů, prohlížet značkování vygenerované frameworkem nebo pochopit uspořádání sekce na jiném webu. Zvolte zdroj odpovídající vaší otázce. Uložený zdroj stránky zachycuje značkování dodané serverem, zatímco značkování zkopírované z panelu prvků může zahrnovat změny provedené klientskými skripty. Formátování tyto pohledy nesjednocuje ani nevytváří DOM za běhu. Při hledání nečekaného prvku porovnejte zdroj s živým dokumentem a prozkoumejte skript, který prvek přidal. Podobně přehledně odsazená struktura nadpisů pomůže při ruční kontrole, ale nenahrazuje audit přístupnosti celé stránky.
Zpracují se i vložené skripty a styly
Skutečná stránka je jen zřídka pouhé značkování. Analytické skripty, strukturovaná data JSON-LD, konfigurační objekty a kritické CSS jsou vloženy přímo do dokumentu a minifikátor zhustí i je. Formátovač zpracuje každý vložený blok správným syntaktickým analyzátorem, takže značka script s minifikovaným JavaScriptem vyjde jako čitelný JavaScript a značka style jako čitelné CSS, to vše uvnitř správně odsazeného dokumentu.
Zkontrolujte obsah citlivý na bílé znaky
Bílé znaky mohou ovlivnit vykreslení HTML, zejména kolem řádkového textu a uvnitř prvků jako pre a textarea. Formátovač používá pravidla zohledňující běžné chování bílých znaků v HTML, formátování však není vizuální regresní test. Ponechte si původní stránku a před zveřejněním změn ověřte výsledek v jeho skutečném prostředí. Rozložení závisí také na stylech, skriptech a chování prohlížeče, které se zde nevyhodnocují. Naformátovaná kopie pomáhá při čtení dokumentu, sama však neprokazuje, že se stránka zobrazí stejně.
Časté dotazy
Mohu vložit zdrojový kód celé stránky?
Ano. Zkopírujte zdrojový kód z prohlížeče přes view-source nebo si stránku uložte a otevřete soubor, a naformátuje se celý dokument včetně částí head a body, vložených skriptů a strukturovaných dat.
Změní formátování vzhled stránky?
Formátovač se snaží respektovat významové bílé znaky HTML, přesto výsledek před zveřejněním porovnejte. U řádkového textu, předformátovaného obsahu a v kombinaci se styly mohou být mezery důležité. Ponechte si původní kopii a otestujte vykreslení v projektu, kde se značkování skutečně používá.
Funguje nástroj se šablonami Twig nebo Blade?
Editor je určen pro HTML doručené prohlížeči. Twig, Blade a další šablonovací jazyky přidávají syntaxi, kterou formátovač HTML může odmítnout nebo zpracovat neočekávaně. Pro spolehlivý pohled na výsledné značkování nejprve nechte projekt vykreslit šablonu a poté naformátujte vzniklý dokument HTML.