Tryb samych konturów dodaje kolorowe obramowania konturu do każdego elementu HTML na stronie, zapewniając natychmiastowy rentgenowski widok struktury układu. Zobacz dokładnie, gdzie znajduje się każdy div, sekcja, nagłówek, akapit i przycisk — w tym ich padding, marginesy i relacje zagnieżdżenia.
Zrozumienie układu strony jest często pierwszym krokiem w debugowaniu problemów CSS. Czy ta dodatkowa biała przestrzeń jest spowodowana paddingiem czy marginesem? Czy element jest szerszy niż oczekiwano z powodu nieograniczonego dziecka? Czy dwa elementy nakładają się z powodu konfliktowych pozycji? Tryb samych konturów natychmiast odpowiada na te pytania, rysując kolorowe obramowania wokół każdego elementu na stronie. W przeciwieństwie do DevTools przeglądarki (które podświetlają tylko jeden element naraz), to narzędzie nakreśla wszystko jednocześnie — dając kompletny obraz. Każdy typ elementu HTML otrzymuje odrębny kolor: nagłówki są niebieskie, elementy nav są żółte, główna zawartość jest zielona, akapity są różowe, przyciski są cyjanowe i tak dalej. Kodowanie kolorami ułatwia dostrzeganie wzorców strukturalnych i identyfikację elementów jednym spojrzeniem bez czytania DOM.
Przełączaj kontury na każdym elemencie jednym kliknięciem — bez konfiguracji, bez panelu ustawień. Kliknij raz, aby zobaczyć wszystkie obramowania, kliknij ponownie, aby je usunąć. Najszybszy sposób na wizualizację struktury układu na dowolnej stronie.
Różne elementy HTML otrzymują różne kolory konturu do natychmiastowej identyfikacji wizualnej. Nagłówki w kolorze niebieskim, nawigacja w żółtym, główna zawartość w zielonym, nagłówki sekcji w fioletowym, akapity w różowym, przyciski w cyjanowym, divy w szarym. Można identyfikować typy elementów bez czytania DOM.
Kontury sprawiają, że niewidoczne problemy CSS stają się widoczne. Dostrzegaj nieoczekiwane marginesy tworzące białe przestrzenie, padding rozpychający elementy szerzej niż oczekiwano, przepełnienie powodujące poziome paski przewijania lub zwinięte elementy zajmujące zerową wysokość. Każda granica pudełka staje się widoczna.
Zagnieżdżone kontury ujawniają strukturę rodzic-dziecko DOM. Zobacz, jak głęboko są zagnieżdżone elementy, który kontener zawiera jaką zawartość i gdzie kończą się granice każdego poziomu zagnieżdżenia. Nieocenione do zrozumienia złożonych układów grid i flex.
Aktywuj na dowolnej stronie — własne projekty, strony klientów, strony konkurencji lub referencje projektowe. Kontury są stosowane poprzez wstrzyknięcie CSS i nie modyfikują struktury DOM ani nie wpływają na zachowanie JavaScript.
Kontury są rysowane przy użyciu CSS outline (nie border), co oznacza, że nie dodają się do wymiarów modelu pudełkowego elementu. Układ strony pozostaje dokładnie taki, jaki był — kontury są czysto wizualne i nie powodują żadnego przepływu.
Tryb samych konturów covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsTa tajemnicza przerwa między sekcjami? Włącz kontury, a natychmiast zobaczysz, czy jest spowodowana marginesem dolnego elementu, paddingiem nadrzędnego kontenera czy pustym divem, o którym nie wiedziałeś. To, co zajmuje minuty w DevTools, zajmuje sekundy z Trybem konturów.
Zmień rozmiar okna przeglądarki z włączonymi konturami, aby obserwować, jak układ zmienia się w różnych punktach przerwania. Zobacz, które elementy się układają, które się przelewają, a gdzie zmienia się struktura grid lub flexbox — wszystko jednym spojrzeniem.
Zbyt wiele zagnieżdżonych divów? Niepotrzebne elementy opakowujące? Tryb konturów sprawia, że nadmierne zagnieżdżanie staje się wizualnie oczywiste — jeśli widzisz 5+ koncentrycznych konturów wokół prostej zawartości, znaczniki można uprościć. Świetny do przeglądu kodu frontendowych PR-ów.
Włącz kontury na stronie głównej, a następnie na podstronie. Czy mają tę samą strukturę układu? Czy marginesy i szerokości sekcji są spójne? Kontury sprawiają, że strukturalna spójność (lub jej brak) staje się natychmiast widoczna.
Pokaż uczniom, jak elementy HTML tworzą pudełka, jak działa model pudełkowy z paddingiem i marginesami oraz jak zagnieżdżanie tworzy hierarchię strony. Tryb konturów zamienia abstrakcyjne koncepcje w widoczne, interaktywne demonstracje.
Otwórz pływający dok DevSuite Pro i kliknij ikonę Trybu samych konturów. Natychmiast każdy element HTML na stronie otrzymuje kolorowe obramowanie konturu.
Każdy typ elementu ma odrębny kolor. Niebieski dla elementów strukturalnych (header, footer, section), zielony dla głównych obszarów zawartości, fioletowy dla nagłówków, różowy dla akapitów, cyjan dla przycisków i pól wejściowych, żółty dla nawigacji i szary dla ogólnych elementów div i span.
Szukaj nieoczekiwanych przerw (spowodowanych marginesami), elementów wystających poza kontenery (przepełnienie), asymetrycznych odstępów (niespójnego paddingu) lub głęboko zagnieżdżonych opakowań (niepotrzebnego zagnieżdżania divów). Wszystko staje się natychmiast widoczne.
Użyj Trybu konturów jako punktu wyjścia, a następnie przełącz się na Inspektor CSS, aby sprawdzić konkretne wartości na zidentyfikowanych elementach, lub Mierz odległość, aby zweryfikować dokładne odstępy między konturowanymi elementami.
Kliknij ponownie ikonę Trybu konturów, aby usunąć wszystkie kontury i powrócić do normalnego widoku strony. Brak potrzeby czyszczenia — to czysty przełącznik.
Zainstaluj DevSuite Pro za darmo i odblokuj ponad 39 narzędzi programistycznych dla swojej przeglądarki.