Chrome 91でデベロッパーツールがさらに便利に!スクロールスナップの実装と検証が簡単になりました

25日にリリースされたChrome 91のデベロッパーツールに、CSSの実装に役立つツールが搭載されました。Chrome 90ではFlexboxのデバッグツールが搭載され、今回のChrome 91ではスクロールスナップ(scroll-snap-typeプロパティ)の配置が可視化できるようになり、実装と検証に役立ちます。

Chrome 91のデベロッパーツールの新機能が便利

参考: What's New In DevTools (Chrome 91)

スクロールスナップ(scroll-snap-typeプロパティ)について、以前の記事をご覧ください。

では、Chrome 91のデベロッパーツールでスクロールスナップ(scroll-snap-typeプロパティ)のデバッグツールの使い方を紹介します。
まずは、スクロールスナップを使用しているページをChrome 91で開きます。手元になければ、デモページで。

デモのキャプチャ

scroll-snap-typeのデモページ

デベロッパーツール(option+command+I)を起動します。

デベロッパーツールのキャプチャ

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

ページ内のHTML要素にscroll-snap-typeプロパティが適用されていると、「Elements」パネルでその要素の横にscroll-snapバッジが表示されます。

デベロッパーツールのキャプチャ

scroll-snapバッジ

scroll-snapバッジをクリックすると、ページ上のスクロールスナップの配置をオーバーレイで表示します。

オーバーレイには、スナップする箇所にドットマークが表示され、スクロールポートの輪郭は実線で、スナップアイテムの輪郭は破線です。スクロールパディングはグリーン、スクロールマージンはオレンジで表示されています。

デベロッパーツールのキャプチャ

scroll-snapバッジをクリック

スクロールスナップ要素が複数あっても、すべての配置を表示します。

デベロッパーツールのキャプチャ

スクロールスナップ要素が複数ある場合

水平・垂直ミックスタイプでも大丈夫です。

デベロッパーツールのキャプチャ

水平・垂直ミックスタイプのスクロールスナップ

Chrome 90では、Flexboxのデバッグツールが搭載され、どんどん便利になっていきますね。

Flexboxの実装と検証が簡単に!Chrome デベロッパーツールの新機能Flexboxエディタとオーバーレイが便利すぎる

Flexboxの実装と検証が簡単になるFlexboxエディタとオーバーレイが搭載

sponsors

top of page

©2021 coliss