Режимът само с очертания добавя цветно кодирани контурни граници към всеки HTML елемент на уебстраницата, като ви дава незабавен рентгенов изглед на структурата на оформлението на страницата. Вижте точно къде се намира всеки div, секция (section), заглавка (header), абзац (paragraph) и бутон — включително техните отстояния (padding), полета (margins) и йерархия на влагане (nesting relationships).
Разбирането на оформлението на страницата често е първата стъпка при отстраняването на CSS проблеми. Дали това допълнително празно пространство е причинено от padding или от margin? Дали даден елемент е по-широк от очакваното поради неограничен дъщерен елемент? Припокриват ли се два елемента поради конфликтни позиции? Режимът само с очертания отговаря на тези въпроси мигновено, като рисува цветни граници около всеки елемент на страницата. За разлика от браузърните DevTools (които подчертават само един елемент в даден момент), този инструмент очертава всичко едновременно — давайки ви пълната картина. Всеки тип HTML елемент получава различен цвят: заглавките (headers) са сини, навигационните елементи са жълти, основното съдържание (main content) е зелено, абзаците (paragraphs) са розови, бутоните са светлосини (cyan) и т.н. Цветовото кодиране улеснява забелязването на структурните модели и идентифицирането на елементите с един поглед, без да се чете DOM дървото.
Превключвайте очертанията на всеки елемент с едно щракване — без конфигурация, без панел с настройки. Щракнете веднъж, за да видите всички граници, щракнете отново, за да ги премахнете. Най-бързият начин да визуализирате структурата на оформлението на всяка уебстраница.
Различните HTML елементи получават различни цветове на очертанията за мигновено визуално идентифициране. Хедърите в синьо, навигацията в жълто, основното съдържание в зелено, заглавията (headings) в лилаво, абзаците в розово, бутоните в циан (светлосиньо), div елементите в сиво. Можете да разпознаете типовете елементи, без да четете DOM структурата.
Очертанията правят невидимите CSS проблеми видими. Забележете неочаквани външни полета (margins), създаващи празно пространство; вътрешни отстояния (padding), които изтласкват елементите по-широко от очакваното; преливане (overflow), което причинява хоризонтални плъзгачи (scrollbars); или свити елементи (collapsed elements), които заемат нулева височина. Всяка граница на кутия (box boundary) става видима.
Вложените очертания разкриват структурата родител-дете (parent-child) на DOM дървото. Вижте колко дълбоко са вложени елементите, кой контейнер кое съдържание обгръща и къде попадат границите на всяко ниво на влагане. Безценно за разбиране на сложни grid и flex оформления.
Активирайте на която и да е уебстраница — ваши собствени проекти, клиентски сайтове, страници на конкуренти или за дизайнерски справки. Очертанията се прилагат чрез инжектиране на CSS и не променят структурата на DOM, нито засягат поведението на JavaScript.
Очертанията се начертават с помощта на CSS outline (не border), което означава, че те не добавят нищо към размерите на box model-а на елемента. Оформлението на страницата остава абсолютно същото — очертанията са чисто визуални и не предизвикват пренареждане (reflow).
Режим само очертания (Outline Only Mode) covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsОнзи мистериозен процеп между секциите? Включете очертанията и веднага ще видите дали той се дължи на марж (margin) на долния елемент, на вътрешно отстояние (padding) в родителския контейнер или на празен div, за чието съществуване не сте подозирали. Онова, което отнема минути в DevTools, се случва за секунди в режим на очертания.
Преоразмерете прозореца на браузъра си с активирани очертания, за да наблюдавате как оформлението се пренарежда при точките на прекъсване (breakpoints). Вижте кои елементи се подреждат един върху друг, кои преливат (overflow) и къде се променя структурата на grid или flexbox — всичко това с един поглед.
Твърде много вложени div елементи? Ненужни елементи обвивки (wrappers)? Режимът на очертания прави прекаленото влагане визуално очевидно — ако видите 5+ концентрични очертания около просто съдържание, маркъпът може да бъде опростен. Страхотно за преглед на код при pull requests на фронтенд.
Активирайте очертанията на началната си страница, след това на подстраница. Споделят ли една и съща структура на оформление? Еднакви ли са отстоянията (margins) и ширините на секциите? Очертанията правят структурната последователност (или липсата й) веднага видима.
Покажете на студентите как HTML елементите създават кутии (boxes), как работи box model-ът с padding и margins и как влагането създава йерархията на страницата. Режимът на очертания превръща абстрактните концепции във видими, интерактивни демонстрации.
Отворете плаващия док DevSuite Pro и щракнете върху иконата Outline Only Mode. Незабавно всеки HTML елемент на страницата получава цветна контурна граница.
Всеки тип елемент има различен цвят. Синьо за структурни елементи (header, footer, section), зелено за основните области на съдържание (main), лилаво за заглавия (headings), розово за абзаци, циан (светлосиньо) за бутони и полета за въвеждане, жълто за навигация и сиво за общи div и span елементи.
Потърсете неочаквани празнини (причинени от margins), елементи, излизащи извън техните контейнери (overflow), асиметрично разстояние (непоследователен padding) или дълбоко вложени обвивки (ненужно влагане на div). Всичко това става веднага видимо.
Използвайте режима на очертания като отправна точка, след това превключете към CSS Inspector, за да проверите конкретни стойности на идентифицираните елементи, или Измерване на разстояние (Measure Distance), за да потвърдите точното пространство между очертаните елементи.
Щракнете отново върху иконата на Outline Mode, за да премахнете всички очертания и да се върнете към нормалния изглед на страницата. Не е необходимо почистване — това е чисто превключване.
Инсталирайте DevSuite Pro безплатно и отключете 39+ инструмента за разработчици за вашия браузър.