Разгъване на HTML онлайн
Превърнете компресирания изходен код на страница в четимо маркиране. Таговете получават отстъп според дълбочината на влагане, атрибутите се подреждат прегледно, а вградените скриптове и стилове се форматират заедно с документа.
Защо изходният код на страницата изглежда така
HTML минификаторите свиват празните символи между таговете, премахват коментари, пропускат незадължителни затварящи тагове и махат кавичките около стойности на атрибути, които не се нуждаят от тях. Сървърните шаблони допълнително усложняват картината, защото страница, сглобена от десетки части, пристига като един поток без видима връзка с файловете, които са я създали. Отворете изходния код на почти всеки работещ сайт и ще намерите документ с няколко огромни реда, в който намирането на затварящия таг на секция означава да броите ъгловите скоби на око.
Най-важна е структурата
HTML има дървовидна структура, а дървото е трудно за четене, когато е изписано на един ред. Отстъпите според дълбочината на влагане веднага показват формата на документа: къде свършва горната част, кой контейнер обхваща основното съдържание, колко дълбоко е вложен компонент и къде трябва да проверите неочаквана връзка между елементи. Затова форматираният изходен код е полезен за проверка на реда на заглавията, преглед на маркиране, генерирано от библиотека, или разбиране как конкурент е организирал интересуваща ви секция. Изберете източника според въпроса си. Запазеният изходен код показва маркирането, доставено от сървъра, а копираното от панела Elements може да включва промени от клиентски скриптове. Форматирането не съпоставя тези два изгледа и не възпроизвежда DOM по време на изпълнение. Когато проследявате неочакван елемент, сравнете изходния код с текущия документ и проверете скрипта, който го добавя. По същия начин добре подредените заглавия помагат при ръчен преглед, но не представляват одит на достъпността на цялата страница.
Вградените скриптове и стилове също се обработват
Една истинска страница рядко е само маркиране. Фрагменти за анализ на посещенията, структурирани данни JSON-LD, конфигурационни обекти и критичен CSS са вградени направо в документа, а инструментът за минифициране компресира и тях. Форматиращият инструмент обработва всеки вграден блок с правилния анализатор: таг script с минифициран JavaScript излиза като четим JavaScript, а таг style излиза като четим CSS, и всичко това вътре в документ с правилни отстъпи.
Проверявайте съдържанието, чувствително към интервали
Празните символи могат да влияят на визуализирането на HTML, особено около текстови елементи на един ред и вътре в елементи като pre и textarea. Инструментът прилага правила, които отчитат обичайното поведение на празните символи в HTML, но форматирането не е тест за визуални регресии. Запазете оригиналната страница и проверете резултата в действителния му контекст, преди да публикувате промени. Оформлението зависи и от стилови файлове, скриптове и поведение на браузъра, които тук не се изпълняват и оценяват. Форматираното копие е полезно за проучване на документа, но не доказва, че страницата ще се визуализира по същия начин.
Често задавани въпроси
Мога ли да поставя целия изходен код на страница?
Да. Копирайте изходния код от браузъра си чрез view-source или запазете страницата и отворете файла, и целият документ ще бъде форматиран, включително head, body, вградените скриптове и структурираните данни.
Ще промени ли форматирането изгледа на страницата?
Инструментът се стреми да спазва значимите празни символи в HTML, но все пак сравнете резултата, преди да го публикувате. Текстът на един ред, предварително форматираното съдържание и взаимодействията със стиловете могат да направят интервалите важни. Запазете оригинално копие и тествайте визуализирането в проекта, където маркирането действително се използва.
Работи ли с шаблони като Twig или Blade?
Редакторът е предназначен за HTML, доставян на браузър. Twig, Blade и други шаблонни езици добавят синтаксис, който HTML инструментът може да отхвърли или да обработи неочаквано. За надежден преглед на генерираното маркиране обработете шаблона през проекта си и форматирайте получения HTML документ.