As promised, here's a little how-to on making the most of Firefox's DOM Inspector tool. Understanding the way a web page has been constructed is normally a case of viewing the source HTML and trying to build a mental picture picture of its structure, based on the way the different elements are nested within each other. It takes some practice, but it can be done. Much easier is to use a tool like the DOM Inspector, which lets us look at each part of the page, piece-by-piece, using a structured tree approach.

As an example I'll take the page I talked about in my last post. The first step is to browse to it in Firefox. Now launch the DOM Inspector from the Tools menu (Ctrl+Shft+I). You'll see a window something like this:

From the View menu enable the "browser" and make sure that Blink Selected Element is selected. The URL of the page you're interested in should already be the address bar at the top. Click on the Inspect button (highlighted by #1 in pink letters on the screengrab above) to the right of the address bar and it will load the page in the "browser" pane.

In order to find the part of the page you're interested within the document tree you can use two methods. The hardest is to drill-down through the tree, element by element, until that part of the page flashes (highlighted #4). Much easier is to click on the button (highlighted #2) that lets you simply click on said element to automatically find it in the tree. Click on one of the problems links with the small text and it will quickly that element, as shown above. In this case, the structured hierarchy of the link within the DOM is:

Armed with this information it is then fairly simple to work out which bits of the CSS stylesheet have an affect on the link element. How? Well, we can find out much more information about any given element node than simply its place in the document. Using the button highlighted at #5 we can choose to view different property-sets for the selected node. Switch to CSS Style Rules and you'll see all the styles applied to it. Work back through the tree and you'll see the other styles, some of which it inherits.

It's hard to sum up just how useful this tool can be. Hopefully this is a good example though. It may be a little rough around the edges but it's an extremely useful tool. Until recenlty I'd over-looked it and never bothered working out how to use it. Now I know how I'll probably be using it daily.

Here are some of the other uses and benefits of the Inspector:

• Learn the strucuture of a HTML document.
• See how particular elements on a page are nested.
• Delete elements to see effect on page.
• Edit/change class names properties atrributes of elements
• Add attributes to the tree (In theory! This doesn't seem to work too well).

You can read more about DOMi in this entry at Mozillazine's KB