empty DOM Inspector
The DOM Inspector is a Mozilla application that you can access from the Tools > Web Development menu in the browser. If you are using a Gecko-based browser other than Mozilla or if for some reason your build doesn't include the DOM Inspector, you can install it by following the links in the installation section below.
When you first start the DOM Inspector, you are presented with a two-pane application window that looks a little like the main Mozilla browser. Like the browser, the DOM Inspector includes a URL bar, a sidebar-like left pane, and some of the same menus—including the Window and Tools menus that provide access to the main applications in the browser suite, such as Mail and Chatzilla, and other, smaller extensions and dialogs.
empty DOM Inspector
The following sections provide a basic overview of the DOM Inspector:
To start using the DOM Inspector, choose one of the following three items:
File > Inspect a Window > The submenu that displays below the Inspect a Window menuitem is the list of currently loaded DOM windows. Probably a browser window and the DOM Inspector are already open and displayed in this list already. The DOM Inspector keeps track of all the windows that are open—all the DOMs that it knows about—so to access the DOM of a particular window in the DOM Inspector, simply access that window as you would normally and then choose it from this dynamically updated menulist in the DOM Inspector application. For example, to begin inspecting the DOM of the main Mail window, open Mail and then go back to the DOM Inspector and choose File > Inspect a Window > Inbox for yourname@yourdomain.com
File > Inspect a URL... Another DOM you can inspect is that of any web page at the other end of a URL. Use this second menuitem to enter a URL and load the DOM of that page into the DOM Inspector. In contrast to the window DOM, which displays the document object model for the application itself, this "document" DOM shows the structure of the web page starting from its topmost <HTML> tag. To use this menuitem, for example, you can enter www.brownhen.com at the prompt and see the DOM of the brownhen index page Ctrl + Shift + IFinally, the Ctrl + Shift + Ishortcut key sequence starts the DOM Inspector up on the DOM of currently loaded web page. For example, if you are reading news on the www.cnn.com website with Mozilla and you select this key sequence, the DOM Inspector loads the DOM of that page and displays its structured representation in the Inspector application window.
When the DOM Inspector loads a DOM, it populates the left pane with the structured, hierarchical view of the DOM and the right pane with information about the selected nodes, including attributes and their values and other data.
Additionally, when you are inspecting the DOM of a web page, a view of the web page is also included in the bottom half of the DOM Inspector. This allows you to use the DOM Inspector without having to use a separate browser window, and it makes it easy to see the DOM Inspector's highlighting of the selected nodes in that page.
DOM Loaded in DI
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.
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. boxelements 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 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 targetobjects that are used to trap and get information about events fired in the 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.
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.
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.
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.
