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