Kun kontur-tilstand tilføjer farvekodede kantomrids til hvert HTML-element på en webside og giver dig et øjeblikkeligt røntgenbillede af sidens layoutstruktur. Se præcist, hvor hvert div-, sektion-, header-, afsnit- og knappelement sidder — inklusive afstand, margener og indlejringsrelationer.
At forstå en sides layout er ofte det første skridt til at fejlsøge CSS-problemer. Er den ekstra blanke plads forårsaget af polstring eller margen? Er et element bredere end forventet på grund af et ubegrænset underordnet? Overlapper to elementer på grund af modstridende positioner? Kun kontur-tilstand besvarer disse spørgsmål øjeblikkeligt ved at tegne farvede kanter rundt om hvert element på siden. I modsætning til browser-DevTools (som kun fremhæver ét element ad gangen) omrider dette værktøj alt samtidigt — og giver dig det komplette billede. Hvert HTML-elementtype får en bestemt farve: headers er blå, nav-elementer er gule, hovedindhold er grønt, afsnit er lyserøde, knapper er cyan og så videre. Farvekodningen gør det nemt at spotte strukturelle mønstre og identificere elementer ved første øjekast uden at læse DOM.
Slå omrids til og fra på hvert element med et enkelt klik — ingen konfiguration, intet indstillingspanel. Klik én gang for at se alle kanter, klik igen for at fjerne dem. Den hurtigste måde at visualisere layoutstruktur på enhver webside.
Forskellige HTML-elementer får forskellige omridsfarver til øjeblikkelig visuel identifikation. Headers i blå, navigation i gul, hovedindhold i grøn, overskrifter i lilla, afsnit i lyserød, knapper i cyan, divs i grå. Du kan identificere elementtyper uden at læse DOM.
Omrids gør usynlige CSS-problemer synlige. Spot uventede margener, der skaber blank plads, polstring, der skubber elementer bredere end forventet, overflow, der forårsager vandrette rullepaneler, eller kollapsede elementer, der fylder nul højde. Hvert kassegrænse bliver synlig.
Indlejrede omrids afslører DOM's forælder-barn-struktur. Se, hvor dybt elementer er indlejret, hvilken beholder der omslutter hvilket indhold, og hvor grænserne for hvert indlejringsniveau falder. Uvurderlig til forståelse af komplekse gitter- og flex-layouts.
Aktivér på enhver webside — dine egne projekter, klientwebsteder, konkurrenters sider eller designreferencer. Omridser anvendes via CSS-injektion og ændrer ikke DOM-strukturen eller påvirker JavaScript-adfærd.
Omrids tegnes med CSS outline (ikke border), hvilket betyder, at de ikke tilføjes til elementets boksmodeldimensioner. Sidelayoutet forbliver præcis, som det var — omrids er rent visuelle og forårsager ingen omlægning.
Kun kontur-tilstand covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsDen mystiske afstand mellem sektioner? Slå omrids til, og du vil straks se, om det skyldes en margen på det nederste element, polstring på den overordnede beholder eller en tom div, du ikke vidste var der. Det, der tager minutter i DevTools, tager sekunder med kontur-tilstand.
Ændr størrelsen på dit browservindue med omrids aktiveret for at se, hvordan layoutet flyder om på tværs af breakpoints. Se, hvilke elementer der stakker sig, hvilke der overflower, og hvor gitter- eller flexbox-strukturen ændres — alt ved et øjekast.
For mange indlejrede divs? Unødvendige indpakningselementer? Kontur-tilstand gør over-indlejring visuelt indlysende — hvis du ser 5+ koncentriske omrids rundt om simpelt indhold, kunne markeringen forenkles. Fantastisk til kodegennemgang af frontend-pull-requests.
Aktivér omrids på din hjemmeside og derefter på en underside. Deler de den samme layoutstruktur? Er margener og sektionsbredder konsistente? Omrids gør strukturel konsistens (eller inkonsistens) øjeblikkeligt synlig.
Vis studerende, hvordan HTML-elementer skaber bokse, hvordan boksmodellen fungerer med polstring og margener, og hvordan indlejring skaber sidehierarkiet. Kontur-tilstand forvandler abstrakte koncepter til synlige, interaktive demonstrationer.
Åbn den flydende dock i DevSuite Pro og klik på ikonet Kun kontur-tilstand. Øjeblikkeligt får hvert HTML-element på siden en farvet omridskant.
Hvert elementtype har en bestemt farve. Blå til strukturelle elementer (header, footer, section), grøn til hovedindholdsområder, lilla til overskrifter, lyserød til afsnit, cyan til knapper og input, gul til navigation og grå til generiske divs og spans.
Kig efter uventede mellemrum (forårsaget af margener), elementer, der strækker sig ud over deres beholdere (overflow), asymmetrisk afstand (inkonsekvent polstring) eller dybt indlejrede indpakninger (unødvendig div-indlejring). Alt bliver øjeblikkeligt synligt.
Brug kontur-tilstand som udgangspunkt, skift derefter til CSS-inspektøren for at kontrollere specifikke værdier på identificerede elementer, eller Mål afstand for at verificere præcis afstand mellem omridsede elementer.
Klik på ikonet for kontur-tilstand igen for at fjerne alle omrids og vende tilbage til den normale sidevisning. Ingen oprydning nødvendig — det er en ren til/fra-knap.
Installera DevSuite Pro gratis och lås upp 39+ utvecklarverktyg för din webbläsare.