Firefoxアドオンの使いどき(自分の場合)

2008/09/26

先日『(X)HTMLやCSSの動作を見るためにプログラマも入れておくべき
５つのオススメFirefoxアドオン』のエントリーを書いて、
そこのコメントにid:bobchinさんが
「私は(アドオンを)こう使ってる！というのがあるとうれしいかも」
というご意見があったので、前回紹介したアドオンのを、
自分の場合こういう時に使っているよというのを書いておこうと思う。

前回の順番で説明すればよかったのかもしれないけど、
今日は説明する順番を変えています。

最初はJSView、実はこれはコーディングの時に使っているわけではなくて、
いいろなサイトを見て回っているときに、そのサイトが
「どんなCSSにしているのかな」とか「どんなJavaScript使っているのかな」
なんて思ったときに、それらを見るときに使っているアドオンです。

見ているサイト上で、ブラウザの下に、JSとかSSというボタンができるので、
それをクリックするだけで、上記画像のように、JavaScriptとCSSの一覧がでてきます。

ただしここに表示されるのは、外部ファイルとして読み込んでいるファイルのみで、
html上に直接書かれているCSSやJavaScriptはそこでは確認できません。

ボタンをクリックして一覧を出したあと、見たいファイルをクリックすると、
そのソースが表示されるので、CSSやJavaScriptの勉強をしたい場合になどに便利です。

もしこれを制作の時点で使うとしたら、
きちんとソースが読み込めているかの確認ができることでしょう。
一覧からクリックしても、読み込めていないファイルについては、
エラーの表示がでるようになっているので、
ファイルのパスが間違っていないかどうかの確認にも使ってみてください。

これはIEでのレンダリングチェックに利用するだけなので、
説明は省略させてもらいます。

Firefoxで見た時は問題なく作れていても、
IEでみたら崩れてしまっていたや、ズレているなどの問題が多々あるので、
必ずIEで確認するようにしたほうがいいです。

これは文法エラーがないかのチェックに使います。
これを使うと、わざわざW3Cなどのチェックサイトに行かなくとも、
ここだけでエラーのチェックをすることができるようになります。

エラーがあると、ソースの表示画面で間違っている箇所を教えてくれます。

例は極端な例で、bodyタグを消した例を表示しているのですが、
こんな感じに間違っている部分を行番号とかも含めて教えてくれます。
説明が英語なのがちょっとわかり辛いのもありますが、
それでも間違っている部分をブラウザで表示したときにわかるので便利だと思います。

そして、僕は使った事がないのですが、
文法の修正も自動的にしてくれるとか・・・使った事がないのでわかりませんが
ぜひそれは使ってみて感想を教えてもらいたいです。

これはいろいろなケースがあるので、全部の機能が使えているわけではないのですが、
例えばJavaScriptで表示が崩れたりなにか誤作動しているときに、
JavaScriptのオンオフが簡単にできたりします。
JavaScriptだけじゃなくて、Cookieや画像、CSSもオンオフ可能です。

個人的に一番重宝しているのは、ソースの検証。
HTML Validatorでもいいのですが、
サイトで確認したいときや、HTML-lintで確認したいとき、
CSSのソースも確認したいときなど、ここのツールから一発で検証サイトへとべる。
さらにローカル内のファイルの検証も可能なのがいい！

使いどころは主にサイトが崩れてしまっている時、
ブロックの状態を確認するにはもってこい。
どこのブロックのズレのために崩れが発生しているのかを確認したりするのに利用している。

そこでも原因がわからない場合、直接各部分の情報を確認できます。

Firebugで自分が使っている部分は主にJavaScriptのエラーをみるため。
エラーが発生していると、どこでエラーなのかが表示される。
また、JavaScriptによるHTMLの変化もみることができ、
動作の確認にもかなり重宝する。

話が少しそれるが、DreamweverCS4では、
このFirebugでみれるようなことが、
ソースコードライブビューでも見れるようになるようだ。
（かなり欲しい。。。）

また、CSSの修正にも便利で、実際にCSSを書き換えられるわけではないが、
Firebug上でCSSの修正テストをすることも可能。
不必要な要素を消したり、値を直したりすることで、
その場で変化をみることができる。

個人的にはWEB Developerで確認できなかったような場合に、
このFirebugで試しに修正したりしてみている。
最近はFirefox上で表示がおかしくなることが最近ないので、
FirebugでのCSS操作はあまり使っていない。

むしろIE上でうまく表示されないことがあるのがあるのが悩み．．．

簡単にだけ書いてみましたが、
こういう時はどうしているの？などの質問があれば、
コメントなどに書いてもらえたらうれしいです。

参考サイト：