Tipps zu Entwicklertools: CSS-Flexbox prüfen und debuggen
bookmark_borderbookmark
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
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.
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2022-09-01 (UTC)."],[],[]]