JavaScript コマンドライン

あらゆる所で活躍

DOM に通じているならば、その調査には JavaScript を使うのが最も早い方法です。Firebug のコマンドラインに JavaScript を入力してみましょう。それはページの一部であるかのように実行され、コンソールに返り値が表示されます。

オートコンプリート

Tab キーを使うと変数やオブジェクトのプロパティのオートコンプリート機能が使えます。Tab キーを一度叩く毎に一つずつ次の候補に進み、Shift + Tab キーだと逆方向に進みます。

オートコンプリート機能にはいくつかの段階があります。まず、入力前にTabキーを叩くとグローバルな変数が候補として表示されます。 "document.b" と入力した後にTabキーを叩くと、b から始まるプロパティが候補として表示されます。最後まで式を入力した後に Tab キーを叩くと、ドキュメント内のその式に該当するプロパティが表示されます。複雑な式、例えば "document.getElementsByTagName('a')[0]." の後に Tab キーを叩くと、該当するタグの全てのプロパティが表示されます。

入力欄を大きく

一行の入力欄が窮屈に感じたなら、コマンドラインをテキストエディタに拡大出来ます。これでスクリプトを一行にしないでも大丈夫。

スマートペースト

エディタで JavaScript を作成した後、それを直ぐにテストしたい。そんなときはコマンドラインにコピーアンドペースト。スクリプトが一行以上あるなら、コマンドラインはコマンド実行が可能なマルチラインエディタに拡張されます。

ブックマークレット作成

ブックマークレット作成もとっても簡単。マルチラインエディタの「コピー」ボタンをクリックすると、クリップボードにブックマークレットのフォーマットでコピーされます。

クリックしてみよう

従来のコマンドラインとは違い、Firebug ではそれぞれのコマンドのアウトプットがプレーンテキストではなくリンク付きテキストとなります。コンソールに吐き出されたオブジェクトにはハイパーリンクが設定されており、クリックすると Firebug の適切なタブでそのオブジェクトを調査できます。

右クリックしてみよう

コンテキストメニューでは様々な機能があなたに呼び出されるのを待っています。違った種類のオブジェクトにはそれぞれ違ったコンテキストメニューがあり、Firebug コンソールにオブジェクトへのリンクを発見したら取り敢えず右クリックしてみましょう。

ミドルクリックしてみよう

もしタブブラウジングとミドルクリックの魔法のような機能を知らないのなら、今すぐ覚えましょう。ブラウザでリンクをミドルクリックするのと同じように、Firebug コンソールのリンクをミドルクリックすると、それらは新しいタブのコンソールに表示されます。

ミドルクリックが出来ないマウスをお持ちの方は、[Ctrl] キー（Mac OS の場合は [Command] キー）と左クリックを組み合わせれば同じ効果となります。

調査からコマンドラインへ

調査ツールでHTML要素を発見した後、それをコマンドラインから操作したい。そんなときは、"$1" 変数で最後に調査した要素を、"$2" で最後から二番目に調査した要素を参照出来ます。

同様に、"$$1" や "$$2" では DOM タブで選択されたオブジェクトを参照出来ます。

コマンドラインから調査へ

コマンドラインはオブジェクトの調査に他のタブを使うには素晴らしい足がかりです。ただ [Enter] キーを押して結果をコンソールに表示する代わりに Shift + Enter を使うと、結果が DOM タブ、HTML タブ、Script タブ、CSS タブの中から適切なタブに表示されます。