CSSのデバッグというのは、ひどく厄介。どのクラスが継承されているかなんて、目で追いかけるとどうしても見落としが発生し、ドツボにはまる。
 
可視化できたらどんなに楽になるか・・・で探してみた。なんと世の中の多くのWEBデザイナーが苦しんでいるはずなのに、その情報が見つからない。検索ワードに問題があるのかしらないけれど。
 
で、やっと見つけた。なんと、FireFIXのプラグインにあったのだ。
 

Webdeveloper

[box color=”lgreen” icon=”fa-download fa-lg”]ダウンロード先→http://www.infoaxia.com/tools/webdeveloper/index.html[/box]
 
インストールは、必ずローカルに送り付けられてからになる。
 
インストールすると、ナビゲーションがすごいことになるけど、まぁファイヤーフォックスをデフォルトブラウザで使うことはないので気にしない。FireFoxは、常にデバッグ専用なのだ。そんだけデバッグプラグインが充実してるってことだけど(笑）
 

ページの呼び出し

解析するターゲットのページを呼び出します。

 

ブロック枠の表示

ターゲットのページを呼び出してから、ブロックの枠を表示させる（させなくてもいいけど、気分的に見やすい・・かも）

 

CSS情報表示

ナビゲーションバーのCSSからCSS情報の表示を選ぶ

 

見方

例として「ソースコードを表示するPLUGIN」の h2 タグの文字列をクリックすると下図のように表示される。