Sofia Emelianova
Mit den Chrome DevTools können Sie CSS-Flexbox-Layouts ganz einfach debuggen. Im Bereich Elemente finden Sie einen kontextsensitiven Flexbox-Editor und ein anpassbares Overlay.
In diesem Video erfahren Sie, wie Sie:
- Mit dem Flexbox-Editor können Sie Flexbox-Eigenschaften per Klick ändern, anstatt sie einzugeben.
- Aktivieren oder deaktivieren Sie das Flexbox-Overlay im Viewport, um die Änderungen sofort zu sehen.
- Im Bereich Elemente > Layout > Flexbox finden Sie eine Liste aller Elemente und können sie in der DOM-Hierarchie suchen. Außerdem können Sie hier die Overlay-Farben anpassen.
Weitere Informationen zu CSS Flexbox finden Sie unter CSS lernen > Flexbox.
Wenn Sie mehr über die Fehlerbehebung in den DevTools erfahren möchten, folgen Sie der Anleitung CSS-Flexbox-Layouts prüfen und beheben.