web-dev-qa-db-ja.com

Chrome開発者ツールで強調表示されているCSSグリッドはありますか?

Firefoxの開発者ツールでは、CSSグリッドを確認したり、CSSグリッドが選択されていないことを確認したりできます。

グリッドが選択されていない場合も、Chromeの開発者ツールでCSSグリッドを表示できますか?

14
asv

Chrome v62 グリッドの強調表示サポートを追加 開発ツールに:

要素に影響しているCSSグリッドを表示するには、ElementsパネルのDOM Treeの要素にカーソルを合わせます。各グリッドアイテムの周りに破線の境界線が表示されます。これは、選択したアイテム、または選択したアイテムの親がdisplay:gridそれに適用されます。

CSS Grid highlighting example

上記のChrome Developersの記事には、それを使用するための短いGoogle Developers YouTubeビデオへのリンクも含まれています。 https://www.youtube.com/watch?v=AqwPrR7hklE =


Chrome v62より前は、Chrome devツールはこのようなグリッドを検査する方法がありませんでした。Firefox開発ツールがあった分野の1つです。ただし、かなり強力です。当時、Chrome-latestは、さまざまなCSSグリッドセルとトラックの強調表示をサポートしていました。

Chromeのこの機能をサポートするCSSグリッドインスペクターアドオンもあります。いずれも使用していませんが、少なくとも半ダースは見ています。 Gridman-CSS Grid Inspector (このアドオンまたは開発者とは関係ありません)。

15
TylerH

実際にChrome Dev Tools(少なくとも2017年8月のバージョン62以降)は、アドオンCSSグリッドの強調表示なしで提供します。

要素に影響しているCSSグリッドを表示するには、[要素]パネルのDOMツリーで要素にカーソルを合わせます。各グリッドアイテムの周りに破線の境界線が表示されます。これは、選択したアイテムまたは選択したアイテムの親にdisplay:gridが適用されている場合にのみ機能します。

5
6ry0u