Introduction to DOM Inspector
Table of contents
The DOM Inspector is a Mozilla application that you can access from the Tools > Web Development menu in the browser. It lets web developers look at the entire DOM as well as update the DOM by hand if you wish.
If you are using a Gecko-based browser other than Mozilla, or you did not install the DOM inspector when you installed your browser, you can install it by following this installation link.
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 an 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.
Starting 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 menu item 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 an URL. Use this second menuitem to enter an 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 + I key shortcut
Finally, the Ctrl + Shift + I shortcut 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.
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. boxelementsuse 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
targetobjects 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.
Page last modified 23:08, 3 Jun 2008 by Olivier.parent?