 Here are some tips on debugging CSS Flexbox with DevTools. First one, use the Flexbox Editor to center an element with ease. Let's say you want to center this text on the container element. Add this place flex to the container element, then you will see an icon next to it. Click on that to open the Flexbox Editor. I like these little buttons here. It helps me visualize the effect of each property value. In this case, I will click on the justify content property to center it horizontally. Then I will center it vertically with aligned items. Now you'll see the text is super center. Next, let's combine it with the power of the Flexbox to better visualize the layout. Let's duplicate the text element. This time, I want to stack them and place them far away from each other instead of showing them side by side. While we are looking at the DOM tree, notice that the flex batch is added next to the flex element. This can help you to spot any flex elements on the page quicker. Apart from that, you can actually click on need to highlight the selected flex element. The dotted line on the page helps you visualize the item's position in the flex. Change the justify content to space evenly. You can see the overlay changes to show you the space in between elements. By the way, do you know the overlay and the icons in the flex editor are context aware? That means when you change the flex direction, the overlay and icons direction will change accordingly too. Let's see that in action. Observe the justify content icon and change the flex direction to column. See that the icons reflect the actual item position on screen. Change the justify content to space between. The overlay reflects the changes nicely too. If you prefer to edit the item value manually, we added the icons in the dropdown too. Edit the value in the styles pane. You will see the icon next to each value. They are context aware too. Apart from that, if you want to view all the flex elements on the page, the layout pane is what you need. Open the layout pane and scroll to the flexbox section. All the flexbox elements are listed here. You can toggle the overlay of each element here. It is the same effect as when you toggle the badge. You can change the color of the overlay here too. Let's change that to a darker color. Besides that, you can straight away locate the element with this little button here. Click to jump to the code in the DOM tree. While the flex badges are nice, sometimes you might want to disable them to reduce the noise on the page. You can disable that by right-clicking on any element, select batch settings and uncheck the flex option. To learn more about flexbox in general, go to this web.dev link on the screen. And to learn more about debugging flexbox with DevTools, go to gu.gear.devtools.flexbox. That's all. See you for the next DevTools tips. Ciao!