Mit den Chrome-Entwicklertools ist das Debugging von CSS-Flexbox-Layouts intuitiv. Im Steuerfeld 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 die Flexbox-Eigenschaften mit nur einem Klick ändern, anstatt sie einzugeben.
- Sie können das Flexbox-Overlay im Darstellungsbereich ein-/ausblenden, um die Änderungen sofort zu sehen.
- Unter Elemente > Layout > Flexbox finden Sie eine Liste aller Elemente, die Sie im DOM-Baum finden. Außerdem können Sie die Overlay-Farben hier anpassen.
Weitere Informationen zur CSS-Flexbox im Allgemeinen finden Sie unter CSS lernen > Flexbox.
Weitere praktische Informationen zur Fehlerbehebung in den Entwicklertools finden Sie in der Anleitung CSS-Flexbox-Layouts prüfen und debuggen.