CSSのデバッグ

• 適用されているスタイル定義の確認
• 適用されているスタイル
  • 擬似要素の確認
• スタイルの編集
  • スタイルのON/OFF

適用されているスタイル定義の確認

DOM要素を選択すると、要素に適用されているスタイル定義を確認することができます。

• Computed Style
  要素に適用されているスタイル全ての一覧です。

• Styles
  指定されたスタイルの一覧です。
  • element.style
    要素に直接記述されているスタイル定義
  • Matched CSS Rules
    CSSで記述されたルールにマッチして適用されているスタイル定義
  • user agent stylesheet
    ブラウザが適用しているスタイル定義

• Metrics
  要素の表示領域です。
  • position
  • margin
  • border
  • padding
  • コンテンツ領域
    のサイズ(単位px)が表示されます。

適用されているスタイル

Computed Styleには計算済みのスタイル定義が表示されていますが、実際にどこで指定したスタイル定義が適用されているのかは、Stylesを見ます。

打消し線の引かれている箇所は要素には適用されていません。この例では、background-color: #000000;に打消し線が引かれています。

これは、 .grayで指定されているbackground-color: #E3E3E3;が優先されているためです。

また、警告マークの表示とともに-moz-border-radius: 1em;に打消し線が引かれています。これは、このブラウザで認識されないCSSプロパティであるため、適用されません。
（"-moz-"はFirefox用のブラウザプレフィックスで、Chromeでは認識されないプロパティになります。）

擬似要素の確認

Chromeのみですが、擬似クラス(:hover,:activeなど)が適用されたスタイルを確認することができます。

スタイルの編集

表示されているスタイル定義を編集することができます。
編集するとページ上の要素に即座に反映されるので、実際の表示を見ながらCSS定義を編集することができます。

スタイルのON/OFF

スタイル定義箇所にマウスオーバーするとチェックボックスが表示されます。チェックボックスのON/OFFで該当するスタイル定義箇所を有効にするか無効にするかを切り替えることができます。