on:2014年11月18日sponsors表示しているWebページのスタイルシートとスタイルをブロックごとに解析し、ページで使用されているプロパティの一覧とそれぞれがどのようにどこに使われているかが分かるChromeの機能拡張を紹介します。マージンが期待通りにならない、カラーの指定がおかしくないかなど、CSSのチェックに大活躍する機能拡張です。-GitHub使い方は簡単。Digをインストールします。Digのボタンをクリックするだけです。Digはシンプルですが、機能も揃っています。Digのボタンをクリックした際に、スタイルシートの一覧が表示され、解析するものを選択することができます。選択するスタイルシートは一つでも、複数でもOK。Digging」をクリックすると、すぐにスタイルのブロックごとの解析が始まります。スタイルのブロックの一覧プロパティごとにまとめられ、それぞれ使用している数が表示されます。左パネル:使用しているプロパティの一覧そのプロパティをクリックすると、どのように使われているか表示されます。左パネル:使用しているプロパティの一覧(marginは8箇所)気になったプロパティがどこに使われているかも調べることができます。左パネル:使用しているプロパティの一覧(margin:0;は3箇所)「margin:0;」は3箇所で、こんな感じ。右パネル:margin:0;を使用しているセレクタの一覧colorの確認も分かりやすいですね。