Režim pouze obrysy přidává barevně odlišené ohraničení každému HTML prvku na webové stránce, čímž vám poskytuje okamžitý rentgenový pohled na strukturu rozvržení stránky. Přesně uvidíte, kde se nachází každý div, sekce, záhlaví, odstavec a tlačítko — včetně jejich odsazení, okrajů a vztahů zanoření.
Pochopení rozvržení stránky je často prvním krokem při ladění problémů s CSS. Je ta extra mezera způsobena odsazením nebo okrajem? Je prvek širší, než se očekávalo, kvůli neomezenému podřízenému prvku? Překrývají se dva prvky kvůli konfliktním pozicím? Režim pouze obrysy odpoví na tyto otázky okamžitě kreslením barevných ohraničení kolem každého prvku na stránce. Na rozdíl od DevTools prohlížeče (který zvýrazní pouze jeden prvek najednou) tento nástroj zobrazuje obrysy všeho najednou — dává vám kompletní obraz. Každý typ HTML prvku získá výraznou barvu: záhlaví jsou modrá, navigační prvky žluté, hlavní obsah zelený, odstavce růžové, tlačítka tyrkysová a tak dále. Barevné kódování usnadňuje rozpoznání strukturálních vzorů a identifikaci prvků na první pohled bez čtení DOM.
Přepněte obrysy na každém prvku jedním kliknutím — bez konfigurace, bez panel nastavení. Jedním kliknutím zobrazíte všechna ohraničení, dalším kliknutím je odstraníte. Nejrychlejší způsob vizualizace struktury rozvržení na jakékoli webové stránce.
Různé HTML prvky získají různé barvy obrysů pro okamžitou vizuální identifikaci. Záhlaví modrou, navigace žlutou, hlavní obsah zelenou, nadpisy fialovou, odstavce růžovou, tlačítka tyrkysovou, divy šedou. Typy prvků poznáte bez čtení DOM.
Obrysy zviditelní neviditelné problémy CSS. Odhalte neočekávané okraje vytvářející prázdné místo, odsazení rozšiřující prvky nad očekávanou šířku, přetečení způsobující vodorovné posuvníky nebo smrštěné prvky s nulovou výškou. Každá hranice boxu se stane viditelnou.
Vnořené obrysy odhalují strukturu rodič-potomek v DOM. Uvidíte, jak hluboko jsou prvky zanořeny, který kontejner obaluje který obsah a kde leží hranice každé úrovně zanoření. Neocenitelné pro porozumění složitým rozvržením grid a flex.
Aktivujte na libovolné webové stránce — vlastních projektech, webech klientů, stránkách konkurence nebo referenčních designech. Obrysy jsou aplikovány pomocí vložení CSS a nemění strukturu DOM ani neovlivňují chování JavaScriptu.
Obrysy jsou kresleny pomocí CSS outline (ne border), což znamená, že nepřidávají k rozměrům box modelu prvku. Rozvržení stránky zůstává přesně tak, jak bylo — obrysy jsou čistě vizuální a nezpůsobují žádný reflow.
Režim pouze obrysy covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsTa záhadná mezera mezi sekcemi? Zapněte obrysy a okamžitě uvidíte, zda je způsobena okrajem na spodním prvku, odsazením nadřazeného kontejneru nebo prázdným divem, o kterém jste nevěděli. To, co trvá minuty v DevTools, trvá sekundy s Režimem obrysy.
Změňte velikost okna prohlížeče s povolenými obrysy a sledujte, jak se rozvržení přelévá přes breakpointy. Uvidíte, které prvky se skládají, které přetékají a kde se mění struktura gridu nebo flexboxu — vše na první pohled.
Příliš mnoho zanořených divů? Zbytečné obalovací prvky? Režim obrysy vizuálně zdůrazňuje nadměrné zanoření — pokud vidíte 5+ soustředných obrysů kolem jednoduchého obsahu, mohl by být kód zjednodušen. Skvělé pro code review frontendu.
Povolte obrysy na domovské stránce, poté na podstránce. Sdílejí stejnou strukturu rozvržení? Jsou okraje a šířky sekcí konzistentní? Obrysy okamžitě zviditelní strukturální konzistenci (nebo nekonzistenci).
Ukažte studentům, jak HTML prvky vytvářejí boxy, jak box model funguje s odsazením a okraji a jak zanoření vytváří hierarchii stránky. Režim obrysy přeměňuje abstraktní koncepty na viditelné, interaktivní ukázky.
Otevřete plovoucí dok DevSuite Pro a klikněte na ikonu Režimu pouze obrysy. Okamžitě každý HTML prvek na stránce dostane barevné ohraničení.
Každý typ prvku má výraznou barvu. Modrá pro strukturální prvky (header, footer, section), zelená pro oblasti hlavního obsahu, fialová pro nadpisy, růžová pro odstavce, tyrkysová pro tlačítka a vstupy, žlutá pro navigaci a šedá pro obecné divy a spany.
Hledejte neočekávané mezery (způsobené okraji), prvky přesahující svůj kontejner (přetečení), asymetrické mezery (nekonzistentní odsazení) nebo hluboko zanořené obaly (zbytečné zanoření div). Vše se stane okamžitě viditelným.
Použijte Režim obrysy jako výchozí bod, poté přepněte na Inspektor CSS a zkontrolujte konkrétní hodnoty prvků, které jste identifikovali, nebo Měření vzdálenosti pro ověření přesného rozestupu mezi zobrazenými prvky.
Kliknutím na ikonu Režimu obrysy znovu odstraníte všechny obrysy a vrátíte se k normálnímu zobrazení stránky. Není potřeba žádné čištění — jedná se o čisté přepínání.
Nainstalujte si DevSuite Pro zdarma a odemkněte 39+ vývojářských nástrojů pro svůj prohlížeč.