The DOM Inspector
4 July 2003 · Last updated: 11 December 2006
Mozilla has something called the DOM Inspector which you can turn on via the Preferences. It shows up in the sidebar (press F9). I've used it before, only after upgrading to Mozilla 1.4 I'm pretty sure it's been beefed up. Now it ranks as an incredible tool for designers. You can now edit a live web page! And a lot more...
Once into the DOM Inspector ('DI') you can see it lists the HTML elements on any page you visit. Click on an element and it flashes a red border around it on your page. Clicking on the arrow next to any element's name expands it to show the nested elements used. The DI allows you to directly edit the attributes for these which effect the page on screen. So instead of working on a file, uploading it, then refreshing the page, you can change the page instantly. Choose different colours or fonts, even hide and show items!
In the DI there are two tabs - Document and Object. The Document tab window lists elements, id, class, along with others available from a menu button. Or it can list the stylesheets and number of CSS rules, or detail the properties and values of any Javascript. You can even enter new expressions based on the selected script.
Choosing the Object tab opens up a separate window with a world of possibilities. From there you can insert new attributes for the elements on the page! Wondering what your table would look like with a border? Insert the border attribute (via the left-click menu on a PC) and enter a value such as 1px.
The Object tab window also has a drop-down menu button offering the following:
- DOM Node, which lists basic details on the element along with any attributes.
- Box Model - this gives you the details of the current object: position, dimensions, margin, border and padding. It also allows you to copy the area an element uses (such as a div or logo) and save it as a PNG image! If a div covers the whole screen, then you can effectively take a screenshot of the page.
There's also a "Pick Color" button but this doesn't seem to do anything yet? - XBL Bindings - I assume this comes up on XML documents.
- CSS Style Rules - this is the killer option. From here you can edit and insert attributes on any element. But not only does Mozilla list the page stylesheet used, it also lists its own generic one used on all pages by the browser itself. This is a file that governs how it treats every HTML element. You can now edit your browser!
- Caution: extreme care should be taken in editing it. If you mess up like I just have, every web page you visit can be altered! Yet it's a great way to learn how CSS has been used by Mozilla to govern HTML.
From the DI you can see the HEAD tag always has{display:none;}set. Try changing it to{display:block;}and see what happens! - Computed Style - this time we are able to see the actual CSS Mozilla is applying from its generic stylesheet. You'll be surprised how many lines there are. They include special Mozilla CSS such as rounded corners and opacity.
- Javascript Object gives the property and value of a script.
Mozilla's Generic Stylesheets
Look In the directory "C:\Program Files\mozilla.org\Mozilla\res\". There is the generic stylesheet the DI refers to called html.css. Open it in Notepad and study the CSS built in to the browser. Too much padding on headers? Find out why. This file is ideal for editing (but make a backup first). You might create a disabled friendly browser with enlarged text and enhanced contrast. Or highlight key tags, make all tables have borders, or all links display their address afterwards.
There are also several other key stylesheets listed in the directory. One governs forms, while another deals with quirks found in old pages. Luckily many styles are commented so you can see why they are there. It's quite an education!
Coupled with the DI, these user-editable stylesheets make Mozilla a great tool for the website designer. Geeks have new toys to play with! So get playing and see what you can learn.
Follow comments on this article in a Webmaster World forum discussion. Or post your own here.
Comments (2)
Comments are locked on this topic. Thanks to everyone who posted a comment.
- Rob:
This is all very nice, however, if you do a google for DOM, all you get are pages about where it is, how to inport one for MS/IE and how to use the tool set.
What the blue blazes does DOM stand for? Is it an acronym? Is there some part of a webpage called a 'DOM'?
It seems to have just dropped into the language after Mozilla used it for their inspector tool set, but, I for one, would like to know what the name/initials DOM stand for.
BTW, it is very powerful, and I have used it to good effect, but that doesn't answer my question about what DOM stands for.
Posted on 5 September 2004 at 2:54 am ¶ - Chris Hester:
DOM stands for "Document Object Model". If you hover over the acronym 'DOM' in the first line of the article I wrote you'll see the definition is there.
Posted on 5 September 2004 at 8:18 pm ¶
