Der Nur-Umriss-Modus fügt jedem HTML-Element einer Webseite farbkodierte Rahmenumrisse hinzu und gibt Ihnen eine sofortige Röntgenansicht der Layout-Struktur der Seite. Sehen Sie genau, wo jedes div, jeder Abschnitt, jeder Header, jeder Absatz und jeder Button sitzt — einschließlich Padding, Margins und verschachtelter Beziehungen.
Das Verständnis des Layouts einer Seite ist oft der erste Schritt beim Debuggen von CSS-Problemen. Wird dieser zusätzliche Leerraum durch Padding oder Margin verursacht? Ist ein Element breiter als erwartet, weil ein untergeordnetes Element nicht eingeschränkt ist? Überlappen sich zwei Elemente aufgrund widersprüchlicher Positionen? Der Nur-Umriss-Modus beantwortet diese Fragen sofort, indem er farbige Rahmen um jedes Element auf der Seite zeichnet. Im Gegensatz zu Browser-DevTools (die nur ein Element gleichzeitig hervorheben) umreißt dieses Tool alles gleichzeitig — und gibt Ihnen das vollständige Bild. Jeder HTML-Elementtyp bekommt eine eigene Farbe: Header sind blau, nav-Elemente gelb, Hauptinhalte grün, Absätze pink, Buttons cyan usw. Die Farbkodierung erleichtert es, strukturelle Muster zu erkennen und Elemente auf einen Blick zu identifizieren, ohne das DOM zu lesen.
Schalten Sie Umrisse für jedes Element mit einem einzigen Klick ein — keine Konfiguration, kein Einstellungs-Panel. Einmal klicken, um alle Rahmen zu sehen, noch einmal klicken, um sie zu entfernen. Der schnellste Weg, die Layout-Struktur einer Webseite zu visualisieren.
Verschiedene HTML-Elemente erhalten verschiedene Umrissfarben zur sofortigen visuellen Identifizierung. Header in blau, Navigation in gelb, Hauptinhalt in grün, Überschriften in lila, Absätze in pink, Buttons in cyan, divs in grau. Sie können Elementtypen identifizieren, ohne das DOM zu lesen.
Umrisse machen unsichtbare CSS-Probleme sichtbar. Erkennen Sie unerwartete Margins, die Leerraum erzeugen, Padding, das Elemente breiter als erwartet drückt, Overflow, der horizontale Scrollbalken verursacht, oder kollabierte Elemente, die null Höhe einnehmen. Jede Box-Grenze wird sichtbar.
Verschachtelte Umrisse zeigen die Eltern-Kind-Struktur des DOM. Sehen Sie, wie tief Elemente verschachtelt sind, welcher Container welchen Inhalt umschließt und wo die Grenzen jeder Verschachtelungsebene liegen. Unschätzbar zum Verstehen komplexer Grid- und Flex-Layouts.
Aktivieren Sie auf jeder Webseite — Ihren eigenen Projekten, Kunden-Sites, Konkurrenzseiten oder Design-Referenzen. Die Umrisse werden über CSS-Injektion angewendet und modifizieren weder die DOM-Struktur noch beeinflussen sie JavaScript-Verhalten.
Umrisse werden mit CSS outline (nicht border) gezeichnet, was bedeutet, dass sie den Box-Modell-Dimensionen des Elements nichts hinzufügen. Das Seiten-Layout bleibt genau so wie es war — Umrisse sind rein visuell und verursachen kein Reflow.
Nur-Umriss-Modus covers the following, organized by category:
htmlbodyheaderfootermainsectionarticleasidenavh1–h6 headingsp paragraphsspana linksblockquoteprecodebuttoninputtextareaselectformlabeldivul / ol / litable / tr / tdfiguredetailsDieser mysteriöse Abstand zwischen Abschnitten? Schalten Sie Umrisse ein und Sie sehen sofort, ob er durch eine Margin am unteren Element, Padding am übergeordneten Container oder ein leeres div verursacht wird, von dem Sie nichts wussten. Was in DevTools Minuten dauert, geht mit dem Umriss-Modus in Sekunden.
Ändern Sie die Größe Ihres Browserfensters mit aktivierten Umrissen, um zu beobachten, wie sich das Layout über Breakpoints hinweg ändert. Sehen Sie, welche Elemente stapeln, welche überlaufen und wo sich die Grid- oder Flexbox-Struktur ändert — alles auf einen Blick.
Zu viele verschachtelte divs? Unnötige Wrapper-Elemente? Der Umriss-Modus macht Überverschachtelung visuell offensichtlich — wenn Sie 5+ konzentrische Umrisse um einfachen Inhalt sehen, könnte das Markup vereinfacht werden. Ideal für Code-Reviews von Frontend-PRs.
Aktivieren Sie Umrisse auf Ihrer Startseite, dann auf einer Unterseite. Teilen sie die gleiche Layout-Struktur? Sind Margins und Abschnittsbreiten konsistent? Umrisse machen strukturelle Konsistenz (oder Inkonsistenz) sofort sichtbar.
Zeigen Sie Schülern, wie HTML-Elemente Boxen erzeugen, wie das Box-Modell mit Padding und Margins funktioniert und wie Verschachtelung die Seitenhierarchie erzeugt. Der Umriss-Modus verwandelt abstrakte Konzepte in sichtbare, interaktive Demonstrationen.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol des Nur-Umriss-Modus. Sofort erhält jedes HTML-Element auf der Seite einen farbigen Umrissrahmen.
Jeder Elementtyp hat eine eigene Farbe. Blau für strukturelle Elemente (header, footer, section), grün für Hauptinhaltsbereiche, lila für Überschriften, pink für Absätze, cyan für Buttons und Eingaben, gelb für Navigation und grau für generische divs und spans.
Suchen Sie nach unerwarteten Lücken (durch Margins verursacht), Elementen, die über ihre Container hinausragen (Overflow), asymmetrischen Abständen (inkonsistentes Padding) oder tief verschachtelten Wrappern (unnötige div-Verschachtelung). Alles wird sofort sichtbar.
Verwenden Sie den Umriss-Modus als Ausgangspunkt, dann wechseln Sie zum CSS-Inspektor, um spezifische Werte bei identifizierten Elementen zu überprüfen, oder zu Abstand messen, um genaue Abstände zwischen umrissenen Elementen zu verifizieren.
Klicken Sie erneut auf das Symbol des Umriss-Modus, um alle Umrisse zu entfernen und zur normalen Seitenansicht zurückzukehren. Keine Nachbearbeitung nötig — es ist ein reiner Schalter.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.