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
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.
This was first published in May 2004