The web developer toolbar has a little-known but powerful tool under the CSS menu – “View Style Information”. (It will be greyed-out unless the DOM inpector is installed.) Click it and then click an element in the page, and it will open a tab or sidebar to display exactly which styles are being applied to the element, using which selectors, and from what stylesheets. It also shows computed styles, I believe. Incredibly useful, especially on a multi-developer production site.

Another helpful feature of the DOM Inspector is the “Computed Style” view. While this doesn’t tell you what CSS file is affecting the node, it does give you a break down of exactly what the nodes is doing as far as presentation goes. I can’t count the number of times where I’ve used it to figure out what property was causing the undesired display, and then used the CSS Rules view to track it down in the CSS.

The dom inspector looks great and I’ve been looking for a long time for something like that.

Since which release of Firefox is it available? Nothing in 1.0

Since long, however, in windows, you have to select ‘Developer tools’ in the installation

This is mighty awesome, thanks for pointing this out Jon! I never knew one could use the DOM Inspector that way…

Do you guys think the ‘Developer tools’ should be made part of a default Firefox installation?

DOM inspector rules for many reasons – and this is one of them. Although there are known issues on how the latest firefox fires off some errors in the console – that’s aside from the inspector. I’ve really found the inspector to be a great thing for so many things. It’s great thing John that you’re continuing to get the word out.

As long as you’re not working with code which has been modified by some JavaScript, I can heavily reccomend xyleScope for debugging CSS.

Still, the DOM-Inspector is a good start.

I use the Dom Inspector too and I don’t wanna miss it anymore ;o) By the way, the DevToolbar for IE includes a DOM-View too.

my personal favourite is the web developer toolbar. This ties in with the DOM Inspector to give you lots of CSS goodness and does lots more besides. Edit your css in a sidebar “live”, Resize your window exactly, Outline elements, mess around with forms… it does it all and more you haven’t thought of yet

Don’t forget the wonderful Javascript Object pane that lets you examine the complete javascript object representation of the object at the point in time. Really very useful with the current crop of AJAX and other projects named after cleaning products.

“Imran:

This is mighty awesome, thanks for pointing this out Jon! I never knew one could use the DOM Inspector that way…

Do you guys think the ‘Developer tools’ should be made part of a default Firefox installation?”

Yes! That would rule. I only have it working on my Linux box & haven’t bothered to reinstall Firefox on the windows partition of my laptop… I almost totally dependent on this thing for doing web design stuff.

I’ll take one for the team here and also note that the horrible burning hell of debugging Internet Explorer layouts has gotten a bit easier since the IE team released its own developer toolbar, which also includes a DOM inspector (of sorts).

@ .mitro:

I checked out the web page for xyleScope and it looks pretty cool. I tried to download it so I could give it a spin, and darn it-it’s only available for Macs! :-(

This is another application that makes me wish that I had a Mac-but then I’d have to give up all the other PC-only programs that I use… ;-)

Oh well, it looks like a lot of the stuff you could probably do already using just Firefox, the DOM inspector, and the web developer toolbar. So I guess I’ll just have to live with that for now.

The DOM Inspector is a great tool, as is the Web Developer Toolbar (these are both “must haves” in my toolkit).

I recently surveyed and reviewed some other web development-related extensions that are available for Firefox 1.5, if you’re looking to fill out your kit a little:

http://www.dria.org/wordpress/archives/2005/11/22/292/

http://www.dria.org/wordpress/archives/2005/11/22/294/

“Why does my navigation have a large moose dressed as Noel Coward on top of all the links?”

Dammit Jon! Now how come you know what I’ve been working on? ;)

Great article – I’m all new to DOM but this is a great start.

What’s strange is that the first time I saw this was earlier today when a coworker showed it to me. Good to have a complete write-up so thank you :D

Wow. That’s really great. I had been using a Firefox extension (View Formatted Source), but this is much, much better—and built in!

Curses, I was planning this article for my own site (since, uhm, august… yeah maybe it’s better you got it out there now, after all).

There’s more uses for debugging CSS though. Computed Style is tremendously valuable, too, as Steven Ametjan said.

John,

Maybe you should also point out that you can edit CSS rules live with the Inspector.

Make sure the right frame shows the two CSS panes. Right click in the bottom pane and a menu will popup giving you a choice of ‘New property’, ‘Edit’, ‘Delete’ and ‘Toggle !important’.

Changes are applied immediately, a page refresh will undo them.