DOM Inspector 入門

DOM Inspector はブラウザの Tools > Web Development メニューからアクセスできる Mozilla のアプリケーションです。これはウェブ開発者が DOM 全体を見たり、必要なら手動で DOM を更新したりできるようにします。

注意: Firefox 3 以降、DOM Inspector はデフォルトインストールには含まれなくなりました。替わりに、Mozilla add-ons サイトからダウンロードしてインストールする必要があります。

DOM Inspector を最初に起動すると、Mozilla ブラウザに似た2ペインのアプリケーションウィンドウが開きます。ブラウザのように DOM Inspector は URL バー、サイドバー（左ペイン）、メニューを持ち、Window や Tools メニューは Mail や Chatzilla やその他の小さな拡張機能やダイアログのようなブラウザスイートのメインアプリケーションへのアクセスを提供します。

empty DOM Inspector

DOM Inspector を開始する

DOM Inspector の利用を開始するには、以下の3つのうちのひとつを行います:

File > Inspect a Window >

Inspect a Window メニュー項目の右に表示されているサブメニューは現在ロードされている DOM ウィンドウのリストです。おそらくブラウザウィンドウと DOM Inspector はすでに開かれており、このリストに表示されます。DOM Inspector は — DOM として認識される — 開かれているすべてのウィンドウを追跡します。そのため、DOM Inspector で特定のウィンドウの DOM にアクセスするには、単に DOM Inspector アプリケーションの中で動的に更新されるリストからウィンドウを選択するだけです。例えば、Mail ウィンドウの DOM を調べるには、Mail を開き、DOM Inspector に戻って File > Inspect a Window > Inbox for [email protected] を選択します。

File > Inspect a URL...

URL から任意のウェブページの DOM を調べることが出来ます。この二つ目のメニューアイテムを使用して URL を入力し、DOM Inspector にページの DOM をロードします。アプリケーションそのもののドキュメントオブジェクトモデルを表示するウィンドウの DOM とは対照的に、この "文書" の DOM は最上位の <HTML> タグから始まるウェブページの構造を示します。このメニュー項目を使うには、例えば、www.brownhen.com を入力すると brownhen のインデックスページの DOM を見ることが出来ます。

DOM of a Web Page

`Ctrl + Shift + I` キーショートカット

最後に、Ctrl + Shift + I ショートカットキーは現在ロードしているページの DOM で DOM Inspector を開始します。例えば、Mozilla で www.cnn.com ウェブサイトを読んでいてこのキーをタイプすると、DOM Inspector はページの DOM をロードしその構造を Inspector アプリケーションウィンドウに表示します。

DOM Inspector が DOM をロードすると、左ペインに DOM の構造化された階層ビューを、右ペインに選択したノードの情報（属性とその値など）を表示します。

加えて、ウェブページの DOM を表示している間、DOM Inspector の下半分にウェブページが表示されます。

これは DOM Inspector を独立したブラウザウィンドウを持つことなく利用することが可能になり、選択したノードが DOM Inspector によりページ内でハイライト表示されるのを見るのが容易になります。（最近の Firefox 版では DOM Inspector ウィンドウ内でのウェブページ表示は行われずに、Firefox 内でハイライト表示されます。） DOM Loaded in DI

Using the DOM Inspector

Once you have the DOM of the page or chrome you are interested in, you can use the tree view in the left pane of the DOM Inspector to find and inspect aspects of that DOM you are interested in. One of the biggest and most immediate advantages that this brings to your web and application development is that it makes it possible to find the markup and the nodes in which the interesting parts of a page or a piece of the user interface are defined. One common use of the DOM Inspector is to find the name and location of particular icon being used in the user interface, which is not an easy task otherwise. As you select parts of the DOM in the left pane of the DOM Inspector, the rendered versions of those nodes are highlighted in the user interface itself. If you inspect the main browser window, for example, and select nodes in the right pane (other than the endless list of script elements that are loaded into navigator.xul and that have no visible UI), you will see the various parts of the browser interface being highlighted with a blinking red border. You can traverse the structure and go from largest parts (e.g., the statusbar element that sits at the top-level of the navigator DOM) to smallest parts, such as the "mini-mail" icon that lets users access the Mail application from the bottom left corner of the browser window.

DOM Inspector Information Types

When you have selected a node like the "mini-mail" node, you can select any one of several types of information to display about that node in the right pane of the DOM Inspector application window, all of which are available from the pull-down menu in the upper left corner of the right pane. In order to find out what the actual name of the file is being used to provide the small mail icon, you can select CSS Style Rules from this menu and see the various selectors and rules that have been applied for those selectors. The rule that applies the mail icon to the "mini-mail" element is ID-based (since the icon is unique to the mail item in the taskbar), and uses a list-style-image property to point to a file in the theme JAR. That file turns out to be a GIF located at: chrome://commmunicator/skin/taskbar/mail.gif. The list of types available from this pull-down menu gives you some idea about how extensive the DOM Inspector's inspecting capabilities are. The following table provides an overview of what these sets of information are about:

DOM Node The default view. DOM Node shows the structural DOM representation of the given page or chrome.

Box Model The box model is the layout system of Mozilla's application interface. box elements
use stretchiness, flexibility, and nesting to achieve table-like layout capabilities in XUL documents. This view shows how boxes and these layout attributes are used to position elements within the interface.

XBL Bindings XBL is a language that allows you to build extensions in XUL and HTML. Where XBL bindings
are loaded into documents by means of CSS rules, this view lets you inspect them.

CSS Style Rules This view shows you all of the CSS rules that are applied to the selected nodes.

Computed Style
The computed style of an element is all of the style rules that get applied to that element, whether from explicit style declarations, from script, or from inheritance. The computed style view of an element's style rules gives you a long, flat list of rules that you can inspect and [#update update] if you wish.

JavaScript Object This view shows you all of the JavaScript objects that are used to script and manipulate a given
node. Common examples of JavaScript objects are target objects that are used to trap and get information about events fired in the interface.

Selecting Elements in a User Interface

Another powerful interactive feature of the DOM Inspector is that it can display the subtree of any element in any DOM it has loaded. In other words, when you have the DOM Inspector open and have enabled this functionality by choosing Search > Select Element by Click or by clicking the little magnifying glass icon in the upper left portion of the DOM Inspector application, you can click anywhere in a loaded web page or the chrome of the Mozilla application interface, and the element you click will be threaded into the left pane and information about it displayed in the right.

Searching for Nodes in the DOM

Another way to inspect the DOM is to search for particular elements you're interested in by ID, class, or attribute. When you select Search > Find Nodes... or press Ctrl + F, the DOM Inspector displays a find dialog that lets you find elements in various ways, and that gives you incremental searching by way of the <F3> shortcut key.

Updating the DOM Dynamically

A final feature to mention in this introduction is the ability is the ability the DOM Inspector gives you to dynamically update information reflected in the DOM about web pages, user interface, and other elements. Note that when the DOM Inspector displays information about a particular node or subtree, it presents individual nodes and their values (in the DOM, attributes are subnodes of elements, typically) in an active, sortable list. You can right-click individual items in this list and be presented with a context menu that lets you edit the values of those attributes. For example, table elements are often used to layout elements in a web page, but when something goes wrong it can be difficult to find the offending cell, especially when tables are nested several deep, as they often are on complicated web pages. You can use this dynamic editig capability of the DOM Inspector to set tables aside (i.e., by changing their background color, adding a border, and so on). This interactivity allows you to shrink and grow element size, change icons, and do other layout-tweaking updates—all without actually changing the DOM as it is defined in the file on disk.

Loving the Inspector

The DOM Inspector can take some figuring out, but once you get used to it, you may find that these structured views of web pages and interfaces were exactly the aspects of your own application development that were missing. The DOM Inspector not only presents all this information about pages in a clear and structured way, it gives you way to find and update those structures, and it's simple to access via shortcuts and menus already available in the Mozilla browser. Used in concert with Mozilla tools like Venkman, the JavaScript debugger, the DOM Inspector can give you a complete view of any web page or DOM-based application interface. It's become an ordinary tool in my own web page development and even my normal browsing—where I see a page that looks like it's been put together in some interesting way and I hit Ctrl + Shift + I to look at the DOM of the page, interesting CSS rules the author has used to present the page, or other, sometimes hidden information about that document.

DOM Node	The default view. DOM Node shows the structural DOM representation of the given page or chrome.
Box Model	The box model is the layout system of Mozilla's application interface. `box` elements use stretchiness, flexibility, and nesting to achieve table-like layout capabilities in XUL documents. This view shows how boxes and these layout attributes are used to position elements within the interface.
XBL Bindings	XBL is a language that allows you to build extensions in XUL and HTML. Where XBL bindings are loaded into documents by means of CSS rules, this view lets you inspect them.
CSS Style Rules	This view shows you all of the CSS rules that are applied to the selected nodes.
Computed Style	The computed style of an element is all of the style rules that get applied to that element, whether from explicit style declarations, from script, or from inheritance. The computed style view of an element's style rules gives you a long, flat list of rules that you can inspect and [#update update] if you wish.
JavaScript Object	This view shows you all of the JavaScript objects that are used to script and manipulate a given node. Common examples of JavaScript objects are `target` objects that are used to trap and get information about events fired in the interface.