Home > 技術 > FirebugがXMLHttpRequestを監視している方法を読んでみる

FirebugがXMLHttpRequestを監視している方法を読んでみる

JavaScriptを使って何か物を作っている人はまず間違いなくFirebugを使っているというほどFirebugは世の中のJavaScripterに浸透しています。

alert文をひたすら書いてデバッグしていた時期が懐かしいです。(今でもalertを使うことはありますが)

そして一番楽になったといえばAjax関連の開発が昔と比べて格段に楽になりました。
これはAjaxリクエストが送信されたタイミングと応答が返ってきたタイミングでFirebugがコンソールに内容を出力してくれるからだと思います。
これ以外にもどれくらい通信速度がかかったかなども見ることができるのでとってもありがたいです。

そんなAjaxの監視をFirebugが一体どうやってやっているのかをここで紹介してみようと思います。

Firebugインストール

Firebugがまだ入っていない人はFirefoxを立ち上げてFirebugを入れてみましょう!

Firebug :: Firefox Add-ons

ソースコードの場所

ボクの環境では以下の場所に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かどうかを判断している箇所があるので、なんとなくここっぽいですね。

2047行目

では次にここのgetRequestWebProgressメソッドを呼び出している箇所に飛びましょう

どうやら同じファイルの2658行目のonModifyRequestメソッドから呼ばれているみたいです。

2658行目

onExamineResponseメソッドからも呼ばれているようですが、onModifyRequestメソッドのほうがネーミング的にとっつきやすいのでとりあえずこっちでw

ではさらに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(肝心な部分が英語ですがw)
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みたいな扱いになってますw
あとスニペットもデフォルトでかなり入っていて、自分で登録も簡単にできるので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

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な情報をあなたに

Home > 技術 > FirebugがXMLHttpRequestを監視している方法を読んでみる

Tag cloud
月別アーカイブ
Powered by
Powered by
Movable Type Commercial 4.261

Page Top