Firebug 1.2 ‘console’ implementation 和訳

Firebug 1.2 ‘console’ implementation

FF3betaでFirebugの1.1のコマンドが動かなくなりました。これを直すのがすごい難しくてコマンドラインとコンソールを作り直す必要がありました。はじめにコンソールについて書いて、次回コマンドラインの実装について書きます(訳注:けっきょく2008.5.16現在まだ書かれてないです)。

Firebugの’console’を使ってWeb開発者はテキストやオブジェクトをFirebugのコンソールパネルに出力することができます。新しいバージョンは emelement messaging を使っています。webページの要素を使ってFirebugに制御フローと値を渡す、っていう意味です。こんなかんじで動きます。

Webページがロードされてからはじめのjavascript関数が呼ばれたりする前に document.createElement() を使ってページにscriptタグを仕込みます。スクリプトは_firebugConsoleという見えないdiv要素とconsole関数を追加します。Webページの開発者が console.log("foo"); を呼ぶとlog()関数は

1. "foo"という文字列をconsoleのユーザオブジェクトの配列に書き込みます。
2. _firebugConsole要素のひとつの属性に"foo"オブジェクトのインデックスを書き込みます。
3. _firebugConsole要素のfirebugAppendConsoleイベントをディスパッチします。

これらは全部標準のDOM操作です。

Firebug側ではfirebugAppendConsoleイベントリスナを_firebugConsole要素に追加しておきます。イベントがやってきたら、要素の属性を使ってユーザーオブジェクトにアクセスしてそれをFirebugのコンソールパネルに書き込みます。

FirebugはユーザーオブジェクトにアクセスすることでFirefoxのセキュリティラッパーテクノロジーを使って、おかしなウェブのコードがextension空間に入ってくるのを防いでいます。

いま(1.2a13)の実装にはもうひとつ間にレイヤがあります。consoleを定義するscriptタグはロードされるページ全部に入れられるわけではありません。かわりに小さな5行でできたwindow.consoleのgetterを定義します。getterはconsoleのコードをロードして、consoleオブジェクトがはじめて使われたときに_firebugConsole要素を作ります。

Mike Shaver, Mark Kahn, Justin Dolskeがこれを作るヒントをくれました。ありがとう。もしコンソールについてソースを見ようと思ったらこのへんになります。

• consoleを定義するソースを注入しているところ
• The firebugAppendConsoleをlistenしているFirebugのイベントハンドラ.
• The console本体