DevTools-tips: CSS-flexbox inspecteren en debuggen
bookmark_borderbookmark
Stay organized with collections
Save and categorize content based on your preferences.
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.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Translation issue","translationIssue","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-09-01 UTC."],[],[]]
