Инструментът за структура на страницата (Page Outliner) изобразява пълната DOM структура на всяка уебстраница като визуално дърво — директно върху самата страница. Всеки HTML елемент получава цветен етикет, показващ името на неговия таг, а дълбочината на влагане се разкрива чрез отстъпи (indentation) и свързващи линии. Това е като да гледате панела Elements (Елементи) на DevTools, но проектиран върху живата страница.
Браузърните DevTools показват DOM като текстово дърво в страничен панел, откъснато от визуалното оформление. Page Outliner преодолява тази пропаст, като проектира DOM структурата директно върху страницата. Всеки елемент получава малка цветна значка (badge), показваща името на неговия таг (div, section, nav, h1, p, button и т.н.), разположена в горния ляв ъгъл на елемента. Вложените елементи са визуално отместени навътре и дървовидната структура става веднага видна. Това прави невероятно лесно да разберете с един поглед как е изградена страницата — можете да видите, че хедърът (header) съдържа навигация (nav) с пет тага за връзка (anchor tags), основното съдържание има три елемента section, всеки от които съдържа articles, и футърът обгръща div с лого и списък с връзки. Всичко това, без да отваряте DevTools или да четете суров HTML изходен код.
Всеки видим елемент на страницата получава цветна значка (badge), показваща неговото HTML таг име. От най-външните html и body елементи чак до отделни spans, връзки и бутони — нищо не е скрито. Този слой (overlay) визуализира пълната йерархия на елементите като подробна карта.
Всеки тип елемент получава различен цвят на фона за своята значка. Структурните елементи (header, main, footer) в синьо, навигацията в кехлибарено (amber), заглавията (headings) в лилаво, абзаците в сиво, връзките в жълто, бутоните в циан (светлосиньо), изображенията в розово. Можете да идентифицирате типовете елементи по цвят, без да четете текста.
Задръжте курсора на мишката върху която и да е значка (badge), за да подчертаете съответния елемент с полупрозрачен слой, показващ точните му размери (ширина × височина в пиксели). Границата на елемента се очертава и значката става по-отчетлива — което улеснява идентифицирането на това коя значка към кой елемент принадлежи.
Дълбоко вложените елементи са отместени по-далеч от левия ръб, което прави отношенията на влагане незабавно видими. Вижте с един поглед дали една страница има твърде много обвиващи div елементи (wrapper divs) (5+ нива на дълбочина) или чиста, плитка структура. Свързващите линии показват отношенията родител-дете.
Слоевете (overlays) са позиционирани абсолютно и не влияят на оформлението на страницата, превъртането или поведението на JavaScript. Етикетите на значките са малки и полупрозрачни, така че все още можете да виждате съдържанието на страницата под тях. Изключете мигновено, за да се върнете към нормалното.
Щракнете върху която и да е значка на елемент-контейнер, за да свиете дъщерните му елементи, скривайки вложените значки. Полезно за фокусиране върху конкретен раздел (section), без да бъдете затрупани от DOM дървото на цялата страница. Щракнете отново за разгъване.
Попаднали сте на сложна уебстраница и трябва да разберете как е изградена? Page Outliner ви показва цялата DOM йерархия с един поглед — кои секции какво съдържание съдържат, как е структурирана навигацията и къде започва и свършва основната област на съдържанието.
Прекомерното влагане на div-ове прави CSS по-труден за писане, а страниците се визуализират по-бавно. Ако видите 6+ нива от цветни значки, подредени една върху друга за обикновен текстов блок, маркъпът се нуждае от опростяване. Page Outliner прави това веднага очевидно.
Използва ли страницата правилни семантични елементи? Търсете значки header, nav, main, article, section и footer. Ако всичко е само div елементи, липсва семантична структура — което вреди на достъпността (accessibility), SEO и управляемостта на кода.
Посетете всеки добре изграден уебсайт (пр. Stripe, Linear, Vercel) и активирайте Page Outliner, за да видите как техните фронтенд екипи структурират своя HTML. Научете модели на оформление (layout patterns), като видите реални DOM структури в живи страници.
Използвайте първо Page Outliner, за да идентифицирате кои елементи съществуват и къде се намират, след това превключете към CSS Inspector (CSS инспектор) или Measure Distance (Измерване на разстояние), за да се задълбочите в конкретни елементи, които сте идентифицирали.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Page Outliner. Инструментът веднага сканира DOM на страницата и изобразява значки на тагове (tag badges) върху всеки видим елемент.
Цветни значки се появяват в горния ляв ъгъл на всеки елемент, показвайки името на тага му (div, section, h1, p и т.н.). Структурата на влагане се вижда чрез отместване и позициониране на значките.
Преместете мишката върху която и да е значка (badge), за да подчертаете съответния елемент. Полупрозрачен слой показва границите и размерите на елемента. Това свързва абстрактното име на тага с визуалната му позиция на страницата.
Щракнете върху значка на контейнер, за да скриете (свиете) значките на неговите дъщерни елементи. Това ви позволява да се съсредоточите върху специфични области на страницата без визуален хаос от дълбоко вложени елементи.
Щракнете върху иконата Page Outliner в дока, за да премахнете всички слоеве (overlays) и да се върнете към нормалния изглед на страницата. Не остават никакви следи.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.
