Seiten-Gliederung rendert die vollständige DOM-Struktur einer Webseite als visuelle Baum-Überlagerung — direkt auf der Seite selbst. Jedes HTML-Element bekommt ein farbiges Label mit seinem Tag-Namen, und die Verschachtelungstiefe wird durch Einrückung und Verbindungslinien sichtbar. Es ist wie das Betrachten des Elements-Panels der DevTools, aber auf die Live-Seite projiziert.
Browser-DevTools zeigen das DOM als Textbaum in einem Seitenpanel, losgelöst vom visuellen Layout. Seiten-Gliederung überbrückt diese Lücke, indem die DOM-Struktur direkt auf die Seite projiziert wird. Jedes Element erhält ein kleines farbiges Abzeichen mit seinem Tag-Namen (div, section, nav, h1, p, button usw.), positioniert an der oberen linken Ecke des Elements. Verschachtelte Elemente sind visuell eingerückt und die baumartige Struktur ist sofort erkennbar. Dies macht es unglaublich einfach, auf einen Blick zu verstehen, wie eine Seite gebaut ist — Sie können sehen, dass der Header ein Nav mit fünf Anchor-Tags enthält, der Hauptinhalt drei Section-Elemente mit jeweils Artikeln hat und der Footer ein Logo-div und eine Linkliste umschließt. Alles ohne DevTools zu öffnen oder rohen HTML-Quellcode zu lesen.
Jedes sichtbare Element auf der Seite erhält eine farbige Tag-Abzeichen-Überlagerung mit seinem HTML-Tag-Namen. Von den äußersten html- und body-Elementen bis hinunter zu einzelnen Spans, Links und Buttons — nichts ist versteckt. Die Überlagerung rendert die vollständige Element-Hierarchie als visuelle Karte.
Jeder Elementtyp erhält eine eigene Hintergrundfarbe für sein Abzeichen. Strukturelle Elemente (header, main, footer) in blau, Navigation in bernstein, Überschriften in lila, Absätze in grau, Links in gelb, Buttons in cyan, Bilder in pink. Sie können Elementtypen anhand der Farbe identifizieren, ohne den Text zu lesen.
Fahren Sie mit der Maus über ein Tag-Abzeichen, um das entsprechende Element mit einer halbtransparenten Überlagerung hervorzuheben, die seine genauen Abmessungen (Breite × Höhe in Pixeln) zeigt. Die Elementgrenze wird umrissen und das Abzeichen wird prominenter — es ist leicht zu erkennen, welches Abzeichen zu welchem Element gehört.
Tief verschachtelte Elemente sind weiter vom linken Rand eingerückt, wodurch Verschachtelungsbeziehungen sofort sichtbar werden. Sehen Sie auf einen Blick, ob eine Seite zu viele Wrapper-divs (5+ Ebenen tief) oder eine saubere, flache Struktur hat. Verbindungslinien zeigen Eltern-Kind-Beziehungen.
Die Überlagerungen sind absolut positioniert und beeinflussen weder Seiten-Layout, Scrollen noch JavaScript-Verhalten. Abzeichen-Labels sind klein und halbtransparent, sodass Sie den Seiteninhalt darunter noch sehen können. Sofort ausschalten, um zur Normalansicht zurückzukehren.
Klicken Sie auf das Abzeichen eines Container-Elements, um seine Kinder einzuklappen und die verschachtelten Abzeichen auszublenden. Nützlich, um sich auf einen bestimmten Abschnitt zu konzentrieren, ohne vom gesamten DOM-Baum der Seite überwältigt zu werden. Erneut klicken zum Aufklappen.
Auf einer komplexen Webseite gelandet und möchten verstehen, wie sie aufgebaut ist? Seiten-Gliederung zeigt Ihnen die gesamte DOM-Hierarchie auf einen Blick — welche Abschnitte welchen Inhalt enthalten, wie die Navigation strukturiert ist und wo der Hauptinhaltsbereich beginnt und endet.
Übermäßige div-Verschachtelung macht CSS schwerer zu schreiben und Seiten langsamer zum Rendern. Wenn Sie 6+ Ebenen farbiger Abzeichen übereinander für einen einfachen Textblock sehen, muss das Markup vereinfacht werden. Seiten-Gliederung macht dies sofort offensichtlich.
Verwendet die Seite korrekte semantische Elemente? Suchen Sie nach header-, nav-, main-, article-, section- und footer-Abzeichen. Wenn alles nur div-Elemente sind, fehlt der Seite semantische Struktur — was Barrierefreiheit, SEO und Wartbarkeit schadet.
Besuchen Sie eine gut gebaute Website (Stripe, Linear, Vercel) und aktivieren Sie Seiten-Gliederung, um zu sehen, wie ihre Frontend-Teams ihr HTML strukturieren. Lernen Sie Layout-Muster durch reale DOM-Strukturen auf Produktionsseiten.
Verwenden Sie Seiten-Gliederung zuerst, um zu identifizieren, welche Elemente existieren und wo sie sich befinden, dann wechseln Sie zum CSS-Inspektor oder Abstand messen, um tiefer in spezifische identifizierte Elemente einzutauchen.
Öffnen Sie die schwebende DevSuite Pro-Dock und klicken Sie auf das Symbol der Seiten-Gliederung. Das Tool scannt sofort das Seiten-DOM und rendert Tag-Abzeichen auf jedem sichtbaren Element.
Farbige Abzeichen erscheinen an der oberen linken Ecke jedes Elements mit dem Tag-Namen (div, section, h1, p usw.). Die Verschachtelungsstruktur ist durch Einrückung und Abzeichen-Positionierung sichtbar.
Bewegen Sie die Maus über ein Abzeichen, um das entsprechende Element hervorzuheben. Eine halbtransparente Überlagerung zeigt die Grenzen und Abmessungen des Elements. Dies verbindet den abstrakten Tag-Namen mit seiner visuellen Position auf der Seite.
Klicken Sie auf ein Container-Abzeichen, um die Abzeichen seiner Kinder einzuklappen. So können Sie sich auf bestimmte Seitenbereiche konzentrieren, ohne visuelles Durcheinander durch tief verschachtelte Elemente.
Klicken Sie auf das Symbol der Seiten-Gliederung in der Dock, um alle Überlagerungen zu entfernen und zur normalen Seitenansicht zurückzukehren. Keine Spuren bleiben zurück.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 39+ Entwickler-Tools für Ihren Browser frei.
