Modern Web browsers have extensive support for the standards defined by the World Wide Web Consortium. The Mozilla browsers, both the Application Suite and Firefox, include a tool called the DOM Inspector that exploits these standards. Here we'll take it for a quick spin.
Despite its very-nearly-but-not-quite-entirely-finished status, the DOM
Inspector has been a hit with Web developers. Even those Web folk trapped in
the embrace of Microsoft's Internet Explorer sometimes use it as a diagnostic
tool. It's that good. It can also be downloaded as an add-on to the Netscape
7.x browsers. Its pre-1.0 status means you need to fiddle a bit to get it
humming along, but the effort is worth it.
Here's how you get going with DOM Inspector. Starting with any browser window, choose from the menu bar Tools | DOM Inspector, or Tools | Web Development | DOM Inspector, whichever works. A new DOM Inspector window appears -- you can have several such windows if you need them. Depending on the browser, the DOM Inspector might or might not be able to inspect already-displayed browser windows. It can always, however, inspect browser windows started up after the Inspector is ready, so start a new window (from the menu, File | New ..., or just type Control-N). Display some common Web page in that window, like www.yahoo.com.
To inspect that browser window, choose File | Inspect a Window, and then the
window with the sample Web page. You can use the DOM Inspector to inspect the
DOM Inspector window itself, but that's too confusing for a first run. Once you've picked the window to inspect, the DOM Inspector left-hand pane fills with an outline of that window's content, based on the W3C DOM 1 Core standard. Surprisingly, that content looks nothing like HTML.
Most Mozilla windows hold firstly XUL content, since that's how portable
Mozilla products are made. The HTML page (www.yahoo.com) is inside that XUL
content, so you have to drill down to find it. You drill down through the
branches of the tree by clicking on the expandable twisties (the little plusses
or triangles). If you drill down in this order: #document, window, hbox, vbox
(the second one), tabbrowser, xul:tabbox, xul:tabpanels, xul:browser and
finally #document, you'll be rewarded with a node named HTML. That node is the
start of the HTML Document loaded into the studied window.
Of course, all those other mystery XUL tags are also interesting, but it's the HTML that's a familiar reference point for experimentation. From there, you can explore the structure of the sample page as much as you like. Note that there are several things to press and drag in the DOM Inspector sub-windows. They can be used to resize or rearrange the display for you.
One useful feature of the DOM Inspector is the drop-down menu at the top
of the right pane. Normally it's labeled "Object -- DOM Node". If you click
on the HTML tag on the left, and choose "CSS Computed Style" from this
menu, then the DOM Inspector reports the results of the cascading system
used for CSS. This can be used to poke about in a Web page to see what's
hidden and what's not. It also shows Mozilla's many extensions and precursors
to the standards -- those styles all start with -moz. In short, the DOM
Inspector grants a glimpse inside browser technology and Web pages that is
otherwise hard to see.
