CSS - how to debug Flexbox in Chrome DevTools

In this article, we would like to show you how to debug CSS Flexbox in Chrome DevTools.

CSS flexbox debugging tools is a new add-on introduced in Chrome 90 that allows you to easily test Flexbox styles.

Steps:

1. Enable Chrome DevTools (F12) or right-click on the element on the page that you want to examine and select the Inspect option.
2. If the element has the display:flex or display:inline-flex properties in the Style pane, the Flexbox editor icon is next to it.

Note:

Clicking on each of the options causes a given style to be added and real changes occur on the page.