DevTools Tips: How to inspect and debug CSS flexbox
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.