デベロッパーツールがさらに便利に！Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載

先日リリースされたChrome 90のデベロッパーツールに、Flexboxの実装に役立つ新機能が2つ加わりました！

1つ目はFlexboxエディタでデバッキングツール、2つ目はFlexboxのオーバーレイ、どちらもWeb制作でFlexboxを使用する時に大活躍すること間違いなしです。

参考: New CSS flexbox debugging tools

Flexboxの新機能は非常に便利で、使い方も簡単です。
まずは、Chrome 90にアップデート済みか確認します。

Chrome 90にアップデート済みか確認

デベロッパーツールを通常通りに開きます。ElementsパネルからFlexboxで実装している要素を選択し、Stylesパネルを開きます。

デベロッパーツールを起動

ページ上のHTML要素にdisplay: flex;またはdisplay: inline-flex;が適用されている場合、その横にflexバッジが表示されます。

display: flex;の横のflexバッジをクリック

flexバッジをクリックすると、Flexboxエディタが起動します。Flexboxエディタでは、Flexboxの各プロパティを簡単に編集できます。

Flexboxエディタが開く

Flexboxの各プロパティについての詳しい解説は、以前の記事をご覧ください。
参考: CSS Flexbox の基礎知識と使い方をやさしく解説

FlexboxのオーバーレイはLayoutパネルにあります。Flexboxセクションがあり、ページ上のすべてのFlexbox要素を表示し、各要素のオーバーレイを切り替えることができます。

Flexboxを使用している要素がオーバーレイで簡単に分かる