DOMインスペクタのイントロダクション

DOMインスペクタは Mozilla の拡張機能で、SeaMonkey の Tools > Web Development メニューからアクセスすることも、FirefoxとThunderbirdのToolsメニューからDOMインスペクタメニュー項目を選択することも、Ctrl/Cmd+Shift+I を使って開くこともできます。 DOMインスペクタはスタンドアロンです。 すべてのツールキットアプリケーションをサポートしており、独自のXULRunnerアプリに組み込むことも可能です。DOMインスペクタは、DOMの状態を検証するサニティチェックとして機能したり、必要に応じてDOMを手で操作するために使用できます。

メモ: Firefox 3以降、FirefoxではデフォルトでDOMインスペクタは含まれていません。MozillaアドオンWebサイトからダウンロードしてインストールする必要があります。

最初にDOM Inspectorを起動すると、Mozillaのメインブラウザのような2つのウィンドウのアプリケーションウィンドウが表示されます。 ブラウザと同様、DOMインスペクタにはアドレスバーと同じメニューがあります。 SeaMonkeyでは、追加のグローバルメニューが利用可能になります。

domi.png

ドキュメントの検査

DOMインスペクタが開くと、ホストアプリケーションに応じて関連付けられたドキュメントが読み込まれる場合と読み込まれない場合があります。 DOM インスペクタが自動的に文書を読み込んでいない場合や、検査したい文書以外の文書を読み込んでいない場合は、目的の文書をいくつか選択することができます。

コンテンツ文書の検査

Inspect Content DocumentのmenupopupはFileメニューからアクセスでき、現在ロードされているコンテンツドキュメントを一覧表示します。 FirefoxとSeaMonkeyブラウザでは、これらはタブで開いたWebページになります。ThunderbirdとSeaMonkey Mail and Newsでは、表示しているメッセージはここに表示されます。domi-inspect-content-popup.png

Chromeドキュメントの検査

Inspect Chromeドキュメントのmenupopupには[ファイル]メニューからアクセスでき、現在ロードされているChromeウィンドウとサブドキュメントのリストが表示されます。ブラウザウィンドウとDOMインスペクタはすでに開いてこのリストに表示されている可能性があります。DOMインスペクタは、開いているすべてのウィンドウを追跡します。そのため、DOMインスペクタで特定のウィンドウのDOMを検査するには、通常通りにそのウィンドウにアクセスし、動的に更新されるmenulistからタイトルを選択します。

domi-inspect-chrome-popup.png

任意のURLの検査

また、FileメニューのURL menuitemのInspectを使用するか、DOM InspectorのアドレスバーにURLを入力してInspectをクリックするかenterを押して、任意のURLのDOMを調べることもできます。 たとえば、アドレスバーにhttp://www.mozilla.orgを入力し、mozilla.orgホームページのDOM構造を確認できます。

このアプローチを使用してクロム文書を検査しないでください。 代わりに、ドキュメントが通常の手段でロードされていることを確認し、検査のためにInspect Chromeドキュメントのmenupopupを使用して選択します。

domi-inspect-chrome-popup.png

この方法でWebページを検査すると、DOM Inspectorウィンドウの下部にあるブラウザペインが開き、Webページが表示されます。 これにより、別のブラウザウィンドウを使用せずに、またはアプリケーションにブラウザをまったく埋め込まなくても、DOMインスペクタを使用することができます。 ブラウザペインに余分なスペースが必要な場合は、ブラウザペインを閉じることができますが、操作の視覚的な影響を監視することはできません。

DOM インスペクタの使用

興味のあるページまたはクロムのドキュメントを開くと、ドキュメントペインにDOMノードビューアがロードされ、オブジェクトペインにDOMノードビューアが読み込まれます。 DOM Nodesビューアには、DOMの構造化された階層的なビューが必要です。 ドキュメントペインをクリックすると、ビューアがリンクされていることがわかります。 DOMノードビューアから新しいノードを選択するたびに、DOMノードビューアが自動的に更新され、そのノードの情報が反映されます。 リンクされたビューアは、DOMインスペクタの使用方法を学ぶときに理解した最初の主要な側面です。

DOM インスペクタビューワー

これらのビューアは、DOMインスペクタが提供する2人の視聴者に過ぎないことに注意してください。他のビューアを使用することは可能ですが、今のところDOMノードビューアとDOMノードビューアの説明に固執します。

DOM InspectorのドキュメントペインにあるDOM Nodesビューアを使用して、興味のあるノードを見つけて調べることができます。これがあなたのウェブとアプリケーションの開発にもたらした最大かつ最も直接的な利点の1つは、ページの興味ある部分またはユーザインターフェースの部分が定義されているマークアップおよびノー​​ドを含む。 DOMインスペクタの一般的な使い方の1つは、ユーザインターフェイスで使用されている特定のアイコンの名前と場所を見つけることです。これは簡単な作業ではありません。クロムドキュメントを調べている場合、DOMノードビューアでノードを選択すると、それらのノードのレンダリングされたバージョンがユーザーインターフェイス自体で強調表示されます。 (DOM Inspector APIのフラッシャーが特定のプラットフォームで正しく機能しないようにするバグがあることに注意してください)。

たとえば、メインブラウザウィンドウを調べて、DOMノードビューアでノードを選択した場合(browser.xulにロードされているスクリプト要素の無限リストの場合のように、表示可能なUIを持たない要素を除く)、ブラウザインターフェイスのさまざまな部分が赤く点滅して強調表示されています。構造をトラバースして、DOMツリーの最上部の部分から、ユーザーが選択した検索エンジンを使用してクエリを実行できるようにする "search-go-button"アイコンなど、下位レベルのノードに移動できます。

domi-edit-search-onclick.png

ここで、「検索 - 移動 - ボタン」ノードのようなノードを選択すると、複数のビューアのいずれかを選択して、そのノードに関する情報をDOM Inspectorアプリケーションウィンドウのオブジェクトペインに表示できます。 menupopupはオブジェクトペインの左上隅からアクセスします。

domi-object-viewers.png

検索の実行アイコンを表示するためにファイルの実際の名前が使用されているかどうかを確認するには、このメニューからCSSルールビューアを選択して、適用されているさまざまなセレクタとルールを確認します。要素に検索アイコンを適用するルールは、クラス単純セレクタを使用し、list-style-imageプロパティを使用して現在のテーマのファイルを指し示します。

ビューアメニューから利用可能なビューアのリストは、DOMインスペクタの検査能力がどれだけ広範囲であるかを示しています。以下の説明は、これらの視聴者の概要を示しています。

DOMノードビューアには、ノードノードの属性、またはテキストノード、コメント、処理命令のテキストコンテンツが表示されます。属性とテキストの内容を編集することもできます。

Box Modelビューアは、配置とサイズを含むXULとHTML要素に関するさまざまな指標を提供します。

XBLバインディングビューアには、要素に添付されたXBLバインディングが一覧表示されます。バインディングが別のバインディングを拡張する場合、バインディングmenulistは、それらを「ルート」バインディングに降順でリストします。

CSSルールビューアには、ノードに適用されるCSSルールが表示されます。また、スタイルシートビューアと組み合わせて使用​​すると、CSSルールビューアには、そのスタイルシートから認識されたすべてのルールが順番にリストされます。プロパティを編集することもできます。擬似要素に適用されるルールは表示されません。

JavaScript Objectビューアは、オブジェクトペインのサブジェクトの階層ツリーを提供します。 JavaScriptオブジェクトビューアでは、コンテキストメニューで適切なメニュー項目を選択することによってJavaScriptを評価することもできます。

DOM ノードビューワーの基本的なアクション

クリックで要素を選択する

DOM インスペクタのもう一つの強力なインタラクティブな機能は、DOM インスペクタを開いてこの機能を有効にしたときに、Edit > Select Element をクリックして選択するか、DOM インスペクタアプリケーションの左上にある小さな虫めがねのアイコンをクリックすると、 ロードされたWebページのどこかをクリックするか、クロム文書を調べると、クリックした要素がDOMノードビューアのドキュメントペインに表示され、オブジェクトペインに表示されます。

DOM内のノードの検索

DOMを検査するもう1つの方法は、ID、クラス、または属性で興味のある特定の要素を検索することです。 Edit > Find Nodes... を選択するか Ctrl + F を押すと、DOM Inspectorには、さまざまな方法で要素を検索できる検索ダイアログが表示され、<F3> ショートカットキーを使用して段階的に検索します。

domi-find-appcontent.png

動的にDOMを更新する

この序論で言及するもう1つの機能は、DOM Inspectorが、Webページ、ユーザーインターフェイス、およびその他の要素についてDOMに反映された情報を動的に更新できることです。 DOM Inspectorが特定のノードまたはサブツリーに関する情報を表示すると、個々のノードとその値が表示されます(DOMでは、属性は通常、要素のサブノードです)。 これらの属性の値を編集できるメニュー項目があるコンテキストメニューと編集メニューから、このリスト内の個々の項目に対してアクションを実行できます。

domi-edit-search-onclick.png

このインタラクティビティを使用すると、ディスク上のファイルに定義されているDOMを実際に変更することなく、要素のサイズを縮小したり、サイズを変更したり、アイコンを変更したり、レイアウトを微調整したりすることができます。

Loving the Inspector

DOM インスペクタは何かを理解することができますが、慣れてくると、Webページやインタフェースのこれらの構造化されたビューは、自分のアプリケーション開発の欠点であったことに気付くかもしれません。DOM インスペクタは、ページに関するすべての情報を明確かつ構造化された方法で提示するだけでなく、それらの構造を見つけて更新する方法を提供し、 Mozilla ブラウザで既に利用可能なショートカットやメニューから簡単にアクセスできます。Venkman (JavaScriptデバッガ) などのMozillaツールと連携して使用されるDOM Inspectorは、WebページやDOMベースのアプリケーションインターフェイスの完全な表示を提供します。

ドキュメントのタグと貢献者

このページの貢献者: silverskyvicto
最終更新者: silverskyvicto,