DOM の調査

あなたの作ったコードを大切に

ページには二種類のオブジェクトとファンクションがあります。通常の DOM の一部のものと、あなたの書いた JavaScript で生成されたものです。 Firebugはその違いを見分け、あなたのスクリプトに生成されたオブジェクトやファンクションを太字で一覧の最上部に表示します。

もっと完全に識別したいのなら、違った種類のオブジェクトを完全に隠してしまうオプションメニューが用意されています。

オブジェクトの有益な要約

ページには様々な種類のオブジェクトがありますが、Firebug は可能な限りの情報を提供して、その識別に全力を尽くします。オブジェクトは可能であれば自身のコンテントの概要を含むため、わざわざクリックしなくても何があるのかを確認できます。 オブジェクトは各種類毎に色分けされますから、HTML　要素、数字、文字列、ファンクション、配列（arrays）、オブジェクト、及びnullは一目で区別が付きます。

いつでも編集

ただ DOM を見るだけじゃ楽しくありませんから、時々は弄ってみたくなります。 ツリー内の空白列をクリックすると小さなエディタが現れて、選択されている値を変更することが出来ます。

忘れないで欲しいのは、DOM エディタは JavaScript コマンドラインの小型バージョンだということ。つまり、どんな JavaScript も書けるということです。その JavaScript は [Enter] キーを押すと評価され、結果が変数に割り当てられます。

オートコンプリート

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

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

再読込後の復元

何度も何度もクリックを繰り返し、ついに探していた壊れた DOM オブジェクトが見つかりました。あなたはエディタにコードを書き終え、これからページを再読込をしてそのオブジェクトが直ったかどうか確かめたい。ご心配なく、Firebug は再読込後にまたそのオブジェクトを掘り出させるような面倒な真似はさせません。ページの再読込後、Firebug はオブジェクトのフルパスだけでなくスクロールバーの位置まで復元します。

ブレッドクラム機能

エクスプローラの左側をクリックすると、Firebug　はオブジェクトを現在のビューで表示します。もしオブジェクトを全画面ビューで見たい場合には、右側をクリックします。

Firebug はオブジェクトをクリックする毎にツールバーにパスを追加していきます。これはオブジェクトにたどり着くまでにアクセスしたプロパティの記録です。パスをクリックするとそこに移動します。

JavaScript コードナビゲーション

DOM エクスプローラはデバッグしたい JavaScript ファンクションを見つけ出すにはとても優れた方法です。DOM エクスプローラのファンクションをクリックすると、Firebug はスクリプトタブの当該箇所にあなたを導きます。そのファンクションは強調表示されているでしょう。