DevTools Tips: How to inspect and debug CSS flexbox
Stay organized with collections
Save and categorize content based on your preferences.
Chrome DevTools makes debugging CSS flexbox layouts intuitive. The Elements panel provides you with a context-aware Flexbox Editor and customizable overlay.
Watch the video to learn how to:
- Use the Flexbox Editor to change flexbox properties with a click of a button instead of typing them.
- Toggle the flexbox overlay in the viewport to see the changes you make right away.
- Use the Elements > Layout > Flexbox section to see a list of all elements and locate them in the DOM tree. Additionally, you can customize the overlay colors here.
To learn more about CSS flexbox in general, see Learn CSS > Flexbox.
For a more hands-on debugging experience in DevTools, follow the Inspect and debug CSS flexbox layouts tutorial.
Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies. Java is a registered trademark of Oracle and/or its affiliates.
Last updated 2022-09-01 UTC.
[[["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"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2022-09-01 UTC."],[],[]]
