- 2009-01-30 (金)
- 技術
JavaScriptを使って何か物を作っている人はまず間違いなくFirebugを使っているというほどFirebugは世の中のJavaScripterに浸透しています。
alert文をひたすら書いてデバッグしていた時期が懐かしいです。（今でもalertを使うことはありますが）
そして一番楽になったといえばAjax関連の開発が昔と比べて格段に楽になりました。
これはAjaxリクエストが送信されたタイミングと応答が返ってきたタイミングでFirebugがコンソールに内容を出力してくれるからだと思います。
これ以外にもどれくらい通信速度がかかったかなども見ることができるのでとってもありがたいです。
そんなAjaxの監視をFirebugが一体どうやってやっているのかをここで紹介してみようと思います。
Firebugインストール
Firebugがまだ入っていない人はFirefoxを立ち上げてFirebugを入れてみましょう！
ソースコードの場所
ボクの環境では以下の場所にFirebugが置いてあります。
C:\Documents and Settings\hogeuser\Application Data\Mozilla\Firefox\Profiles\yrljtiye.dev\extensions\firebug@software.joehewitt.com
もうみなさんも慣れて来たと思いますが、実際のコードはこのディレクトリのcontentフォルダの中にあります。
ここにJavaScriptやらxulやらCSSなどがゴロゴロありますが、今回見るファイルはそんなに多くはないので大丈夫です！
ソースコードリーディング
ボクはこの手のソースコードを追う場合は、まずは関連しそうなキーワードでgrepしちゃいます。
たとえば今回はAjax部分の監視をしている箇所なので、おそらく「XMLHttpRequestがなんたらかんたら」みたいな部分がありそうだな～なんて。
なので「XMLHttpRequest」でgrepし、そこからソースコードリーディングを始めてみたいと思います。
grepする範囲はcontentディレクト内の全ファイルからということにしてみます。
またコードの量がそこそこ多いので、メソッドの中とかかなり端折った形で紹介していきますのでご了承ください。
net.js
XMLHttpRequestをキーワードにgrepした結果、net.jsがとってもあやしそうです。
2047行目にinstanceofでXMLHttpRequestかどうかを判断している箇所があるので、なんとなくここっぽいですね。
では次にここのgetRequestWebProgressメソッドを呼び出している箇所に飛びましょう
どうやら同じファイルの2658行目のonModifyRequestメソッドから呼ばれているみたいです。
2658行目onExamineResponseメソッドからも呼ばれているようですが、onModifyRequestメソッドのほうがネーミング的にとっつきやすいのでとりあえずこっちでｗ
ではさらにonModifyRequestメソッドを呼び出している箇所に飛びましょう
すぐ上にあるobserveというメソッドが読んでいるようです。
ここまでの時点でなんとなく見えてきましたね。
リクエストが送信されるタイミングでonModifyRequestメソッドが呼び出され、その中のgetRequestWebProgressメソッド内でXMLHttpRequestかどうかを判断しているという感じです。
ではobserveがいつ呼ばれるのかが知りたいところ。
とりあえずobserveでgrepをしてみたもののいまいち呼び出している箇所がなさそうです。
リフレクションだと見つけにくいな～なんて思っていたら、registerObserverというメソッドがあるのに気がつきました。
う～ん、登録しているのか～。あやし～い～。
ということで2609行目のregisterObserverを見てみます。
2609行目
なんとなく2種類のイベントにHttpObserverというオブジェクトを渡しているのが確認できます。
実はこのhttp-on-modify-requestというイベントが今回のキモになります。
http-on-modify-requestとは
http リクエストが作られたときに呼ばれます。通信路 (channel)
はヘッダーなどの変更などが可能です。
via: Observer Notifications - MDC
とhttpリクエストが送信されたときに呼ばれるそうです。
さらにaddObserverメソッドの第1引数には、nsIObserverインターフェースを実装したオブジェクトを渡すようにと書かれています。
[scriptable, uuid(DB242E01-E4D9-11d2-9DDE-000064657374)]
interface nsIObserver : nsISupports {
void observe( in nsISupports aSubject,
in string aTopic,
in wstring aData );
};
・nsIObserver - MDC（肝心な部分が英語ですがｗ）
・nsIObserverService - MDC
ということはリクエストが送信されたタイミングで、イベントhttp-on-modify-requestにセットされたHttpObserverオブジェクトのobserveメソッドが呼び出されるという仕組みになりますね。
やっとobserveが呼び出されるポイントがつかめました。
先に進みましょう！
次はイベントを登録していたregisterObserverメソッドを呼び出している箇所です。
grepした結果192行目で呼び出しているようです。
192行目
じゃあこのinitializeUIメソッドを呼び出している箇所はというと・・・
grepしてみても他のオブジェクトのinitializeUIメソッドは呼ばれているようなんですが、肝心なFirebug.NetMonitorのinitializeUIメソッドが呼ばれている箇所が見当たりません。
・・・
実は2804行目でFirebug.registerActivableModuleメソッドにFirebug.NetMonitorを渡しているようです。
2804行目なんとなく見えてくるのがinitializeUIはどうやら登録しておけば勝手に呼ばれるメソッドなの？みたいな。
firebug.js
実は登録したメソッドを呼び出している箇所がfirebug.jsの224行目になります。
224行目このメソッドの
がそれにあたります。
Firebug.registerActivableModuleメソッドで登録しておいたinitializeUIをdispatch関数がリフレクションで呼び出してくれている感じになります。
ではFirebug.initializeUIメソッドはダレが呼んでいるのかと。
chrome.js
chrome.jsの157行目に
157行目となっているのでおそらくこの部分ですね。
ではさらにさかのぼってFirebugChrome.initializeUIを呼んでいる部分へ！
1043行目のbrowser1Loadedという関数の中にありました。
1043行目さらに次～！
browser1Loaded関数は102行目で
102行目
ほほぅ、loadイベントですね。分かります！
これは拡張がロードされたタイミングのイベントになりますね。
さらに次～！
initializeメソッドを呼び出しているのはすぐ上のpanelBarReadyメソッドになります。
58行目bindings.xml
最後のFirebugChrome.panelBarReadyメソッドは実はJavaScriptファイルからの呼び出してではなくbindings.xmlというbindingを定義しているファイルからになります。
id="panelBar"というbinding要素が生成されたタイミングでconstructorタグ内の処理が呼ばれます。
このときにFirebugChrome.panelBarReadyメソッドを呼び出しているということですね。
これでやっと、
「FirebugにAjax通信したときに表示される仕組みが分かりました！」
最後のほうはグダグダでしたが、なんとなくFirebugがXMLHttpRequest送信時にconsoleにログをはく仕組みを理解していただいたと思います。
普段使っているだけあって、こうゆうところにも注意して見てみると面白いですね。
番外編：いつも使っているエディター
ボクがつかっているエディターはPeggyというエディターでシェアウェアですが、1ヶ月のお試し期間があります。
あんまり使っている人がいないようですが、ボクにとっては最強のエディターです。
オススメな機能はプロジェクトを持てることですね。
プロジェクトを作成して、例えばFirebugのソースを一式登録しておけばいつでもプロジェクトファイルを開くだけで見ることができます。
ボクの中では軽いIDEみたいな扱いになってますｗ
あとスニペットもデフォルトでかなり入っていて、自分で登録も簡単にできるのでJS書くときは便利です。
「func」まで入力したら後はCtrl＋/でインテリセンスみたいな。
MacのときはTextMateですね。
PeggyはWindow版のTextMateみたいな感じで使ってます。（スニペットがヤヴァ過ぎる！）
Ruby on RailsのコーディングスタイルにTextMateは最適ですが、jQueryやPrototype.jsのコーディング時にも役にたちます。
拡張的な参考記事
・Firefox拡張機能（Extention）の簡単な作り方メモ ・Firefox拡張機能（Extention）の簡単な作り方メモ Part2
続きで簡易版XMLHttpRequest監視Extentionを紹介してみます。
簡単版にしたXMLHttpRequest監視Extention
↑でさんざん説明してきましたが、一応簡易版にしたコードを載せておきます。
こちらをFirefoxの拡張として読み込んでもらえればステータスバーにAjaxのStartとEndを表示してくれるようになります。
httprequest.js
httprequest.xul
- Newer: NodeList・HTMLCollectionを返すメソッド一覧
- Older: Google Visualization APIメモ
Comments:0
Trackback:0
- TrackBack URL for this entry
- http://hisasann.com/cgi-bin/mt/mt-tb.cgi/1154
- Listed below are links to weblogs that reference
- FirebugがXMLHttpRequestを監視している方法を読んでみる from HouseTect, JavaScript Blog
