Languages
[Edit]
EN

CSS - how to debug Flexbox in Chrome DevTools

0 points
Created by:
Savannah
319

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.
CSS - how to debbug flexbox in Chrome DevTools
​​​​​Flexbox debugging tools

Note:

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

CSS - Flexbox

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join