DOM Inspector DOM Inspectorの概要

DOMノードは解析対象を選択してからツリー構造を展開したりブラウザペインの特定部分をクリックしたりすることで特定部分を選択できる。DOMノードの他にBoxモデル（位置関係の解析）やXBLバインディング、CSSセレクタ・プロパティ・値の解析、Geckoが解析対象に対して定義済みのスタイル、JavaScriptオブジェクトなどの解析結果も表示できるようになっている。CSSとJavaScriptオブジェクトはツリーから選択することが可能で、アクティブなエレメントは赤い枠で点滅表示されるためCSSのデバッグを行うのに有効な手段となっている。

DOM Inspectorを使用するソフトウェア

プリインストール

インストーラ同梱。インストール時の設定でDOM Inspectorをインストールするかしないか選択できるようになっており、必要がなければインストールしないこともできる。

追加インストール

ThunderbirdはMozilla Add-onsにて提供されている専用のDOM Inspectorをインストールすることで利用可能になる。

Mozilla Thunderbird

使用例

HTML構造の解析: ツリー構造の展開によりどの要素の中にどの要素が包括されているか、どの要素にどんな属性が割り当てられているかなどを参照できる。
ブラウザのカスタマイズ: メニュー項目やセパレータなどに割り当てられたコマンドやidなどを解析する。解析したidはuserChrome.cssから参照することでメニュー項目を非表示にしたり装飾を変更したるすることが可能。また、アクションは拡張機能のkeyconfigを用いることでキーボードショートカットを新規に割り当てることが可能となる。