DevTools Tips: How to inspect and debug CSS flexbox

Sofia Emelianova
Sofia Emelianova
GitHub

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.