Debugging CSS with the DOM Inspector

25 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Steven Ametjan

    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.

  2. Salagir

    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

  3. 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?

  4. Dustin Diaz

    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.

  5. Rob Cornelius

    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

  6. Simon Proctor

    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.

  7. Patrick Hall

    “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.

  8. Andrew

    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).

  9. Richard Davies

    @ .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.

  10. dria

    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/

  11. Malarkey

    “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? ;)

  12. Thame

    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

  13. Tim McCormack

    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.

  14. Dominic Mitchell

    I do love the DOM inspector, but there’s one thing I’ve noticed it can’t do. I can’t find a way for it to tell me what font firefox actually used to render a given element. It will show me what I’ve requested. But for something generic like sans-serif, I have no way of finding out what was really used…

  15. Faruk Ates

    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.

  16. Steve Rose

    Am I the only one who can’t figure this out? I can only see the css rules on the right side if I show the stylesheets display the left side. When I show the DOM nodes on the left side, the right side changes to “Object- DOM Node”. If I change that to show the style rules, they are blank.

    I have a Windows PC and Firefox 1.5.

  17. Lester

    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.

Impress us

Be friendly / use Textile