Sofia Emelianova
Chrome DevTools maakt het debuggen van CSS-flexbox-indelingen intuïtief. Het Elementenpaneel biedt u een contextbewuste Flexbox-editor en aanpasbare overlay.
Bekijk de video om te leren hoe u:
- Gebruik de Flexbox Editor om de eigenschappen van de flexbox te wijzigen met een klik op de knop in plaats van ze te typen.
- Schakel de flexbox-overlay in de viewport in of uit om de wijzigingen die u aanbrengt meteen te zien.
- Gebruik de sectie Elementen > Lay-out > Flexbox om een lijst met alle elementen te bekijken en deze in de DOM-structuur te lokaliseren. Bovendien kunt u hier de overlaykleuren aanpassen.
Zie CSS leren > Flexbox voor meer informatie over CSS-flexbox in het algemeen.
Voor een meer praktische ervaring met foutopsporing in DevTools volgt u de tutorial CSS-flexbox-indelingen inspecteren en debuggen .