Mozilla’s DOM Inspector (also available in Firefox – see update below) can seem daunting at first but is amazingly powerful. Amongst other things, it allows you to see which CSS rules are affecting any given element in order of cascade priority.
To do this, open up the DOM Inspector (Tools > Web Development) and type in your URL. Your Web page will load in the bottom frame and the DOM tree will be displayed in the top left frame. Press the pointer button (located top-left) and click an element on your Web page. The DOM tree then highlights to show the chosen element and the element details (text, attributes) appear in the top right frame. Choose CSS Style Rules from the Object drop-down and you’ll see the list of style rules applied to the element in order of cascade priority, starting with Mozilla’s internal settings. As you go down the list, each rule overwrites the previous. Explosing CSS rules in this manner makes it easy to debug the ‘why isn’t it changing colour!?’ problem often encountered during development.
Update: Firefox also comes with a DOM inspector, but on Windows machines, you need to ask for it when you first install the browser: choose Custom Install and then select Web Developer Tools. Once installed, you can find the Firefox DOM Inspector under the Tools menu.
Browsers · Tools & software · DOM | JavaScript · CSS techniques
Micah wrote:
May I add an “amen” to this post? The DOM inspector has saved me countless headaches trying to track down conflicts in the cascade. It is especially nifty to be able to view the computed styles rather than simply the styles that are dictated by the various style sheets. It’s the one feature in Mozilla that kept me from switching to Firefox for so long.
Mike P. wrote:
Nice tip. Nothing’s more of a p.i.t.a. than going back to a relatively complicated site and trying to get a handle on the cascade again…
Tim Parkin wrote:
How did I miss that one!? thats brialliant!! Thanks!! :-)
patrick h. lauke wrote:
another area of web development in which DOM inspector is invaluable is DOM-based javascripting…at last you can see why some newly created instance of an object is not displaying as it should, or if a certain property you’re trying to read is actually set properly…
Dave S. wrote:
Whoa, this is going to make debugging elements with 7 or 8 possible style rules affecting them SO much easier.
Thanks Richard, I had no idea!
mak wrote:
Just a question, how do you enable the DOM inspector in Firefox? I’ve been googling but can’t seem to find a way to enable it.
Mike Steinbaugh wrote:
Wow, this is tremendously useful. Thanks for the heads up! I will definitely make use of this in future design projects.
Asa Dotzler wrote:
DOM Inspector is avialable as part of the Firefox custom install.
Aankhen wrote:
mak:
You should be able to access the DOM Inspector through Tools -> DOM Inspector.
I was evaluating Dreamweaver recently and I found the ‘Relevant CSS’ tab of the blah blah Inspector (no, I can’t keep the names straight :-)) to be extremely useful. Firefox’s DOM Inspector has the added bonus of allowing you to examine the complete DOM of the document in detail. What more could you ask for?
Jon HIcks wrote:
Amazing, I had no idea you could view style rules in the DOM Inspector – this just makes choosing a default OS X browser even harder for me.
Mak – the DOM inspector is only available in the milestone release, you don’t get it in the nightly builds.
Ireney Berezniak wrote:
Viva DOM Inspector!
Wow … this is just what Ireney needed … brilliant! I had no idea such a thing existed … it was always “wouldn’t it be nice if” in the back of my head, but little did I know …
ib.
John Doyle wrote:
Best part is right clicking (I use windows – so sue me) on the relevant rule and selecting ‘edit’. Enter a value and it changes the preview window. Very neat.
thierrybo wrote:
If you have installed FF on windows without DOM inspector, you don’t have to install FF again. Open an explorer window to C:/Documents and Settings/USER/Local Settings/Temp/
Then run the FF installer locally, but only to show the first screen.
Then inside explorer window, you will see a new folder. This is where the installer unpacked its files. You will find the file adt.xpi. Drag it onto FF window ans install it as any extension. Then cancel the installer .
Hope this helps.
Thierry B. (thierry.bo ATATATAT netcourrier.com)
RavenBlack wrote:
Thanks, Thierry B. – I was just going “argh, why is there no DOM inspector?” (I had installed it when I installed Firefox, but seemingly it disappeared during an auto-update at some point.) Daft that there is no non-hacky way to install just the DOM inspector, but at least there isn’t no way at all.
Steve wrote:
Cool, I was hoping it’d work in Firefox. Thanks.
nice blog too.
dom wrote:
So, how to i use DOM inspector in firefox?
Rich wrote:
dom – for more info about the Firefox DOM Inspector, see the update paragraph in the main post.
Les wrote:
just starting to play with this great tool, but it appears that the firefox version has many fewer (odd expression eh!) features than the mozilla version.