いまさら人に聞けない Firebug tips

2年前の夏に書かれたFirebugの便利な組み込み関数 - 技術メモ帳を読んで、いまさらdebuggerと書くとそこからデバッガでステップ実行できるのを知ってショックでした....

lurkerさんのブログで紹介されている$0, $1 で直前にinspectしたものを参照できることも、なぜか公式のドキュメントっぽいFirebug Documentationには載っていなくて、FireBug Documentation - JoeHewitt.comには載っています。

で、もうひとつ、ソースコードにしか書かれてなさそうなやつを発見しました。$$1と$$2です。

自分はFirebugを使っていて、ときどきconsole.logで出したオブジェクトのプロパティを引数にして関数を呼んだりしたい、ということがあったけどできなくて困ってたんですが$$1でそういうことができるようになりました。

たとえばGreasemonkeyのGM_xmlhttpRequestで読み込んだURLの返したステータスコードや、中身をみたいとき、こんなふうにして表示しています。

    GM_xmlhttpRequest( {
        method: 'get',
        url: "http://labs.gmo.jp/blog/ku/",
        onload: function(res){
            console.log(res);
        }
    } );

コンソールにはObjectって出てきます。 これをクリックすると、responseTextでページの内容を見たりできますが、一行になっているのでうしろのほうは読めません。困った！ というときには$$1.responseTextと入れると、今見ていたオブジェクトの中身を$$1で参照することができるようになっているので、改行つきで見やすく出力させることができます。やったね。

ちなみに$$2は今見てたやつのまえのやつを参照できます。$0と違って$$0はありません。あ、まめ知識ついでにドキュメントに書かれてないようなので書いておくとFirebugのコマンドラインでcopy()を使ってクリップボードにデータをコピーできます。copy($$1.responseText)でページの内容をクリップボードにコピーできます。Firebugコンソールでマウスで囲んでコピーすると、改行がなくなっちゃったりへんなことになることがあるので、そういうときはcopy()をつかうといいですよ。

というわけで、検索してもヒットしにくくて知らぬは己ばかりなのかよくわからないので勢いで。

debugger

やや蛇足気味ながらもやっぱりdebuggerってこの機能がどうなってるのかと思ってちょこっとだけ調べてみたら、じつはdebuggerはECMAScriptの予約語になっていて、Firefoxのjavascript実行エンジンのSpidermonkeyがこの予約語をサポートして登録しているデバッガが起動するようになっているのでFirebugでステップ実行できる、みたいです。

おおー、じゃあこれで拡張機能の開発とかで理不尽なめに遭ったときにはステップ実行できるのか？と思っていくつかためしてみました。テストに使ったのはOSX(intel binary)用のFirefox3beta3です。

contentWindow(ふつうのウェブページのコンテキスト)

ふつうに使えます。ウェブのアプリケーション開発には当然ふつうに使えます。

contentWindowでeval

一応使えるけど行単位でしか実行してくれないので、事実上使えません。 evalするコードに改行を入れておいてみたらどうかと思ってやってみたら行番号を勘違いしているみたいで変になりました....

sandbox(Greasemonkeyのコンテキスト)

まったく反応しません。エラーが出たりもしないです。

chromeWindow(拡張機能のコンテキスト)

これもsandboxと同じでまったく反応しません。エラーも出ません。

mozJSSubScriptLoader(拡張機能で動的にロードしたファイル)

機能しません。debuggerで停止してデバッガに切り替わりますが、デバッガのボタンが反応しなくなっている雰囲気です。

拡張機能をデバッグするには

Firebugだと拡張機能のデバッグはできないようなので、古くからあるMozillaのjsデバッガVenkmanだとどうなのかなーと思って調べたところUse Tables! » Blog Archive » Venkman rescue meetingというのが見つかりました。これには

Venkman as it is currently one of the only reasonable debugging tools for chrome-level JavaScript (as Firebug doesn’t work there).

と書いてあって、いまのところFirebugは拡張のコードはデバッグできないのでVenkmanだけが拡張機能のデバッグに使えるけど、最近あんまりメンテナンスされていないので最新版のFirefoxで動かなくなっているらしいです。