Chrome 91でデベロッパーツールがさらに便利に！スクロールスナップの実装と検証が簡単になりました
Post on:2021年5月28日
sponsors
25日にリリースされたChrome 91のデベロッパーツールに、CSSの実装に役立つツールが搭載されました。Chrome 90ではFlexboxのデバッグツールが搭載され、今回のChrome 91ではスクロールスナップ（scroll-snap-typeプロパティ）の配置が可視化できるようになり、実装と検証に役立ちます。
参考: What's New In DevTools (Chrome 91)
スクロールスナップ（scroll-snap-typeプロパティ）について、以前の記事をご覧ください。
では、Chrome 91のデベロッパーツールでスクロールスナップ（scroll-snap-typeプロパティ）のデバッグツールの使い方を紹介します。
まずは、スクロールスナップを使用しているページをChrome 91で開きます。手元になければ、デモページで。
デベロッパーツール（option+command+I）を起動します。
デベロッパーツールを起動
ページ内のHTML要素にscroll-snap-typeプロパティが適用されていると、「Elements」パネルでその要素の横にscroll-snapバッジが表示されます。
scroll-snapバッジ
scroll-snapバッジをクリックすると、ページ上のスクロールスナップの配置をオーバーレイで表示します。
オーバーレイには、スナップする箇所にドットマークが表示され、スクロールポートの輪郭は実線で、スナップアイテムの輪郭は破線です。スクロールパディングはグリーン、スクロールマージンはオレンジで表示されています。
scroll-snapバッジをクリック
スクロールスナップ要素が複数あっても、すべての配置を表示します。
スクロールスナップ要素が複数ある場合
水平・垂直ミックスタイプでも大丈夫です。
水平・垂直ミックスタイプのスクロールスナップ
Chrome 90では、Flexboxのデバッグツールが搭載され、どんどん便利になっていきますね。
sponsors
