Sofia Emelianova
Chrome DevTools では、CSS Flexbox レイアウトを直感的にデバッグできます。[要素] パネルには、コンテキストアウェアの Flexbox エディタとカスタマイズ可能なオーバーレイが表示されます。
次の方法について動画をご覧ください。
- Flexbox エディタを使用すると、入力ではなくボタンをクリックするだけで、Flexbox のプロパティを変更できます。
- ビューポートの Flexbox オーバーレイを切り替えて、変更内容をすぐに確認できます。
- [要素] > [レイアウト] > [Flexbox] セクションを使用して、すべての要素のリストを表示し、DOM ツリー内で要素を特定します。また、ここでオーバーレイの色をカスタマイズできます。
CSS Flexbox 全般について詳しくは、[CSS について] > [Flexbox] をご覧ください。
DevTools でのデバッグの実践方法の詳細については、CSS Flexbox レイアウトを検査してデバッグするのチュートリアルをご覧ください。