DevTools のヒント: CSS Flexbox の検査とデバッグを行う方法

Sofia Emelianova

Chrome DevTools では、CSS Flexbox レイアウトを直感的にデバッグできます。[要素] パネルには、コンテキストアウェアの Flexbox エディタとカスタマイズ可能なオーバーレイが表示されます。

次の方法について動画をご覧ください。

• Flexbox エディタを使用すると、入力ではなくボタンをクリックするだけで、Flexbox のプロパティを変更できます。
• ビューポートの Flexbox オーバーレイを切り替えて、変更内容をすぐに確認できます。
• [要素] > [レイアウト] > [Flexbox] セクションを使用して、すべての要素のリストを表示し、DOM ツリー内で要素を特定します。また、ここでオーバーレイの色をカスタマイズできます。

CSS Flexbox 全般について詳しくは、[CSS について] > [Flexbox] をご覧ください。

DevTools でのデバッグの実践方法の詳細については、CSS Flexbox レイアウトを検査してデバッグするのチュートリアルをご覧ください。