Anzeige von Grids im Browser-Debugger

Bei der Arbeit mit Grids während der Website-Erstellung kann es notwendig sein, zu überprüfen, ob die Anordnung der Elemente im Raster korrekt erfolgt. Außerdem müssen wir, wenn ein Fehler vorliegt, herausfinden, von welchem Element die falsche Platzierung ausgeht. Zu diesem Zweck können wir den Debugger im Browser verwenden.

Lassen Sie uns ein Grid am Beispiel des Debuggers im Browser Chrome betrachten. Zuerst wählen wir das uns interessierende Objekt mit dem Grid aus, klicken mit der rechten Maustaste und wählen aus der Liste die Option 'Untersuchen':

Jetzt bewegen wir in der sich rechts öffnenden Browser-Leiste den Cursor über unser Objekt mit dem Grid und bemerken, dass in der Zeile neben dem übergeordneten Element sich die Schaltfläche grid befindet:

Nachdem wir auf die Schaltfläche grid geklickt haben, werden wir sehen, dass unser Objekt in einem visuell verständlichen Grid-System angezeigt wird, mit der Nummerierung aller Spalten und Zeilen:

Achten Sie nun auf die Leiste im Debugger. In ihr sind die Tabs Styles, Computed, Layout usw. angeordnet. Wechseln Sie vom Tab Styles, der standardmäßig aktiv ist, zum Tab Layout. Sie werden eine Liste der Einstellungen Ihres Grids sehen:

Lassen Sie uns die erste Option Show track sizes zur Anzeige auswählen, welche die Größe der Tracks anzeigt:

Mit der Option Show area names können die Namen der Grid-Bereiche angezeigt werden, sofern diese definiert sind. Und wenn wir die Option Extend grid lines wählen, werden wir die über den Grid-Rahmen hinaus verlängerten Linien der Tracks sehen: