web-dev-qa-db-ja.com

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

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

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

csscss3google-chromecss-griddeveloper-tools
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