Контуры страницы отображают полную структуру DOM любой веб-страницы в виде визуального дерева прямо поверх самой страницы. Каждый HTML-элемент получает цветную метку с именем тега, а уровень вложенности отображается с помощью отступов и соединительных линий. Это как панель Elements в DevTools, но спроецированная на живую страницу.
DevTools браузера отображает DOM в виде текстового дерева в боковой панели, оторванной от визуальной раскладки. Контуры страницы устраняют этот разрыв, проецируя структуру DOM непосредственно на страницу. Каждый элемент получает небольшой цветной значок с именем тега (div, section, nav, h1, p, button и т.д.), расположенный в верхнем левом углу элемента. Вложенные элементы визуально сдвигаются вправо, и древовидная структура становится очевидной с первого взгляда. Это позволяет мгновенно понять, как построена страница: заголовок содержит nav с пятью тегами-ссылками, основной контент включает три элемента section, каждый из которых содержит статьи, а footer объединяет logo div и список ссылок — и всё это без открытия DevTools и чтения исходного HTML-кода.
Каждый видимый элемент страницы получает наложенный цветной значок с именем HTML-тега. От самых внешних элементов html и body до отдельных span, ссылок и кнопок — ничего не скрыто. Наложение отображает полную иерархию элементов в виде визуальной карты.
Каждый тип элемента получает уникальный цвет фона для своего значка. Структурные элементы (header, main, footer) — синим, навигация — янтарным, заголовки — фиолетовым, параграфы — серым, ссылки — жёлтым, кнопки — голубым, изображения — розовым. Типы элементов можно определять по цвету, не читая текст.
Наведите курсор на любой значок тега, чтобы выделить соответствующий элемент полупрозрачным наложением, показывающим его точные размеры (ширина × высота в пикселях). Граница элемента обводится контуром, а значок становится более заметным — легко понять, какой значок соответствует какому элементу.
Глубоко вложенные элементы сдвигаются дальше от левого края, что делает отношения вложенности мгновенно очевидными. Сразу видно, имеет ли страница слишком много оборачивающих div-элементов (5+ уровней) или чистую, неглубокую структуру. Соединительные линии отображают связи родитель-потомок.
Наложения позиционируются абсолютно и не влияют на раскладку страницы, прокрутку или поведение JavaScript. Значки небольшие и полупрозрачные, поэтому содержимое страницы под ними по-прежнему видно. Отключение происходит мгновенно.
Нажмите на значок любого элемента-контейнера, чтобы свернуть его дочерние элементы и скрыть вложенные значки. Удобно для фокусировки на конкретной секции без перегруженности всем деревом DOM страницы. Нажмите снова, чтобы развернуть.
Оказались на сложной веб-странице и хотите понять, как она построена? Контуры страницы показывают всю иерархию DOM с первого взгляда: какие секции содержат какой контент, как структурирована навигация и где начинается и заканчивается основная контентная область.
Чрезмерная вложенность div-элементов затрудняет написание CSS и замедляет рендеринг страниц. Если для простого текстового блока видно 6+ уровней вложенных цветных значков, разметку нужно упростить. Контуры страницы делают это очевидным сразу.
Использует ли страница правильные семантические элементы? Ищите значки header, nav, main, article, section и footer. Если всё состоит только из div-элементов, странице не хватает семантической структуры — что негативно сказывается на доступности, SEO и поддерживаемости.
Зайдите на любой качественный сайт (Stripe, Linear, Vercel) и активируйте Контуры страницы, чтобы увидеть, как их фронтенд-команды структурируют HTML. Изучайте паттерны раскладки на реальных DOM-структурах продакшн-страниц.
Сначала используйте Контуры страницы, чтобы определить, какие элементы существуют и где они находятся, затем переключитесь на CSS Inspector или инструмент Измерение расстояния для более глубокого изучения конкретных элементов.
Откройте плавающий dock DevSuite Pro и нажмите на значок Контуров страницы. Инструмент немедленно сканирует DOM страницы и отображает значки тегов на каждом видимом элементе.
Цветные значки появляются в верхнем левом углу каждого элемента, показывая его имя тега (div, section, h1, p и т.д.). Структура вложенности видна через отступы и расположение значков.
Переместите курсор на любой значок, чтобы выделить соответствующий элемент. Полупрозрачное наложение показывает границы и размеры элемента. Это связывает абстрактное имя тега с его визуальным положением на странице.
Нажмите на значок контейнера, чтобы свернуть значки его дочерних элементов. Это позволяет сосредоточиться на конкретных областях страницы без визуального шума от глубоко вложенных элементов.
Нажмите на значок Контуров страницы в dock, чтобы убрать все наложения и вернуться к обычному виду страницы. Никаких следов не остаётся.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
