おはようございます。加藤です。
自分は普段FirebugというちょっとアレなアイコンのFirefox拡張機能をとてもよく使っています。
- HTMLとCSSの崩れテスト
- 非同期通信のテスト（Javascript、Flash）
- Javascriptでの動的出力されたHTMLの確認
- CSS変更点の確認
といったところでしょうか。これがメインの仕事なのでとても良く使うわけです。
たとえば一部コンテンツのHTMLでダミーテキストで制作を進めているときに
- 文字列が大量に入ったらどうなるかな？
- CSSがなんかおかしいけどこの要素にはどんなスタイルがあたってるのかな？
- Javasccriptで書き出されたHTMLが崩れてるけどどんなHTMLが出力されてるのかな？
といった確認ではFirebugの”HTML”タブが非常に役立ちます。
展開していってタグを選択すると該当の
エレメントに当たっているCSSを継承元から辿って一帯どんなスタイルによって表示されているかが一発でわかります。しかもわかるだけでなくそのままその
CSSをメモリ上で編集してテストできちゃいます。なんかここpadding変だなーっていうときにその場で編集してぽこぽこ確認できるのは便利ですよ
ね。
さらにHTML表示部分でエレメントをダブルクリックするとその中身（たとえばDIVタグの内容）を簡単にその場で編集でき、書いてるそばからどんどこリアルタイムにHTMLを好悪新してくれるのです。
これの便利なところはわざわざ実際のHTMLを書き換えて保存して表示して、（PHPとかで動いてる場合はサーバにアップロードもしなければいけない）なんてしなくてもその場でちょいちょいと確認できるところです。
しかも、Javascriptによって吐き出されているHTMLもちゃんとDOMツリーに組み込んで表示してくれます。
さらに便利なのが”接続”タブ
どんなステータスコードなのかとか戻り値はなんなのかとか、ヘッダを見ることが出来ます。
FlashやJavascriptで非同期通信を行なった場合にPHPやPerlとやり取りをするAPIのデバッグに便利です。
戻り値のXMLなどもキレイに表示してくれるのでXMLの値がおかしいからバグがでてるのか、とかそもそも通信が走ってないな。とか。そんな確認に使います。
これがないともう自分は非同期通信アプリ書きたくないです。
単純に「なんかFlashで画像読み込みできないんだよねー」なんて相談を受けたときもこれで通信履歴を追って「このインタフェースの戻り値がおかしい」とか「なんか取得しようとしてる画像のURLがおかしい」とか解析しています。
また、一つ一つの取得にかかった時間をグラフィカルに表示してくれるので、「ページが重い！」といった問題が発生したときに「この画像でけー！」とか、「CSSファイルでけー！」とか、パッと直感的に分析することができるのです。
そしてFirebugといえばやっぱりこれですね。consoleAPI。
たとえばこの場合は、バリデーションをかけるタイミングで「なんかうまく値とれてないなー」って時にバリデーションの関数の頭でconsole.log(validateStrings);という書式を埋めてみたりしてるところです。
そうするとその引数をコンソールに吐き出してくれるのです（Flashのtrace()に似てる）Javascriptのデバッグといえばalert()です
が、alertだとダイアログが飛び出てうざいのとダイアログが出るタイミングで処理が一旦止まってしまうので正確なデバッグができません。なのでこれは
とても重宝します（この関数がプログラム内に残ってるとIEでJSが動かなくなるので注意！）
consoleAPIにはlogだけじゃなくて便利なメソッドがいくつもあるので使いこなせばJavscript開発やHTML/CSSコーディングがとても楽しく、楽チンになります。
た
とえば、自分は性能テスト・最後の処理高速化のときにconsole.time()というタイマーメソッドを良く使います。
console.time(flag)が実行されてからconsole.timeEnd(flag);が実行されるまでにかかった時間をコンソールに出力
してくれます。
jQueryを使って処理が重たくなったときにこれを使って実行速度を確認しながら高速化をしていきます。
また、このコンソールの右側にあるエリアにjavascriptを記述するとその場で実行することができます。
ページ内の画像のパスを全部書き換えてみたりとか、文字列置換してイメージを見てみたいときなんかに便利です。
ディレクタでもHTMLコーダでもプログラマでもFlasherでも皆が使って便利なFirebug
ぜひとも使ってみてください。
っていうかIEでも使えたらいいのに！（一応IE版に似たのがあるけど全然機能が足りません。ただでさえIEが一番デバッグ大変なのに…）
