DevTools에는 이제 전용 CSS 플렉스 박스 디버깅 도구가 있습니다!

페이지의 HTML 요소에 display : flex 또는 display : inline-flex가 적용된 경우 요소 패널에서 해당 요소 옆에 flex 배지가 표시됩니다. 페이지에서 플렉스 오버레이 표시를 전환하려면 배지를 클릭합니다.

스타일 창에서 display : flex 또는 display : inline-flex 옆에 있는 새 아이콘을 클릭하여 Flexbox 편집기를 열 수 있습니다. Flexbox 편집기는 flexbox 속성을 편집하는 빠른 방법을 제공합니다. 직접 시도해보십시오!

또한 레이아웃 창에는 Flexbox 섹션이 있으며 페이지의 모든 Flexbox 요소를 표시합니다. 각 요소의 오버레이를 전환 할 수 있습니다.

Chromium issues: 1166710, 1175699