こんにちは、沼田です。今回で２度目の投稿になります。
前回から大分間が空いている為、こんな人いたっけ？と思う方もいらっしゃるかもしれませんが・・・。
現在私は、とあるシステムのバージョンUPプロジェクトのメンバーの一人として参加させて頂いております。入社して一年にも満たない私にとって、今回が初めての本格的なシステム開発となります。
今まで学んだことを生かしつつ、また、新たなことを学びつつ日々取り組んでいる毎日であります。
さて、上記システムでは非同期通信をつかって画面を動的に書き換える必要が多々あるためjQueryという、今話題のjavascriptライブラリを使い開発を行なうことになったのですが、その開発の中で Mozillaの次世代ブラウザFireFoxのアドオン（拡張機能）である「Firebug」というデバッグツールが大活躍しています。
「Firebug」は、WEBサイト上のHTML/CSS構文を解析・編集できるほか、javascriptのリアルタイム編集・デバッグ機能を備えたWEBアプリケーション開発者御用達のツールです。
通常javascriptで動的に書き換えられたHTMLは、ブラウザの右クリックでソース表示をおこなっても見ることができない所ですが、「Firebug」では、その書き換えられた部分のHTMLソースまでしっかりリアルタイム表示してくれるため、自分の書いたスクリプトが正しく機能しているか確認するのが、ぐっと容易になります。
またjavascriptでエラーが発生した場合、jsファイルの何行目のどの部分でエラーが発生しているのか、といった詳しい情報も見ることができ、Ajaxレスポンスのヘッダや実行速度なども見ることが出来るので、今回のjQueryを使った開発を行っていく上で欠かせないツールになっています。
そんな便利な「Firebug」ですが、中でも私が開発中よく使う機能が二つあります。
ひとつは、ページ上で読み込んだHTMLソースをリアルタイム編集する機能です。
デバッグ中、わざわざソースコードに手を加えて保存した後にページ更新することなく、リアルタイムでHTML,CSSを編集できるので、ここのhiddenのvalue値をちょっといじって動作を確認しておきたい！という場面で非常に助かっています。検索で結果を導き出してくれるのもうれしい所です。
ふたつめに、ページで使われているjavascriptのソースコードを見ることが できる点です。
他の人が書いたソースコードを参考にしつつ、実際のシステムではこういう風に使われているのか、と勉強させていただいております。
もちろん圧縮、空白除去されたソースコードは解読できませんが。。。
「Firebug」は色々な機能を持ったツールですが、その多機能さ故、まだまだ使いこなせていない点も多々あります。
便利そうな機能があったら、とりあえず使ってみる！ようにして、少しでも効率的な開発ができるようになっていければと思います。
デバッグツール
2007.12.04.火
