【CSS】CSS Digをつかって、開発者ツールとはちょっと違ったCSS解析

CSS Digとは、Webページの解析用拡張機能で、使用されているプロパティ一覧や使われ方などをひと目で確認できるものです。

Chromeの拡張機能として使えます。

インストール

こちらから→ CSS Dig
Screen Shot 2015-04-14 at 16.38.15

中央にある「ADD TO CHROME」をクリックし、ChromeのWeb storeにいきます。
Screen Shot 2015-04-14 at 16.39.13

「+ ADD TO CHROME」をクリックして、拡張機能をインストールしましょう。
Screen Shot 2015-04-14 at 16.40.08

ツールバーに↑このように表示されるはずです(dって書かれているやつです)

さっそく使ってみる

universionsのページでやってみました。
Screen Shot 2015-04-15 at 12.57.01

ツールバーの「d」をクリックすると、上記のようなスタイルシートの一覧がでてきます。styleblockと書かれているのは、インラインで書かれたStyleです。

「START DIGGING」で進みましょう。(ちなみにDIGGINGは採掘・掘ることです。なんかそんな名前のポケモンいましたね)

プロパティ毎に並ぶ解析方法

Screen Shot 2015-04-15 at 13.02.38

Chromeの開発者ツールがセレクター毎に見れるのに対し、CSS Digではプロパティ毎にみることとなります(セレクターでも見れます)

paddingやmarginが下層部に隠れて思うように表示できない場合など、活躍してくれそうです。

Screen Shot 2015-04-15 at 13.06.50

また、colorなどの整理もひと目で見れるので簡単ですね。
上記でも、継ぎ足し継ぎ足しした結果、設定が曖昧になってしまっているのがわかりますね…。

まとめ

普段利用している開発者ツールとはまた違ったデバッグツール、「CSS Dig」のご紹介でした。
自分が作っていないサイトのトレースをするなど、色使いのパターンやフォントに関する設定、ページ全体の把握ができるのがポイントです!

また、はじめに解析対象のスタイルシートを選ぶことができるので、フレームワークやライブラリ系CSSは外すといいかもしれません。

フォローして続編をチェック

@universionsをフォロー