Debugging CSS with the DOM Inspector by Jon Hicks
An Inspector Calls
The larger your site and your CSS becomes, the more likely that you will run into bizarre, inexplicable problems. Why does that heading have all that extra padding? Why is my text the wrong colour? Why does my navigation have a large moose dressed as Noel Coward on top of all the links?
Perhaps you work in a collaborative environment, where developers and other designers are adding code? In which case, the likelihood of CSS strangeness is higher.
You need to debug. You need Firefox’s wise-guy know-it-all, the DOM Inspector.
The DOM Inspector knows where everything is in your layout, and more importantly, what causes it to look the way it does. So without further ado, load up any css based site in your copy of Firefox (or Flock for that matter), and launch the DOM Inspector from the Tools menu.
The inspector uses two main panels – the left to show the DOM tree of the page, and the right to show you detail:
The Inspector will look at whatever site is in the front-most window or tab, but you can also use it without another window. Type in a URL at the top (A), press ‘Inspect’ (B) and a third panel appears at the bottom, with the browser view. I find this layout handier than looking at a window behind the DOM Inspector.
Step 1 – find your node!
Each element on your page – be it a HTML tag or a piece of text, is called a ‘node’ of the DOM tree. These nodes are all listed in the left hand panel, with any ID or CLASS attribute values next to them. When you first look at a page, you won’t see all those yet. Nested HTML elements (such as a link inside a paragraph) have a reveal triangle next to their name, clicking this takes you one level further down.
This can be fine for finding the node you want to look at, but there are easier ways. Say you have a complex rounded box technique that involves 6 nested DIVs? You’d soon get tired of clicking all those triangles to find the element you want to inspect. Click the top left icon (C) – “Find a node to inspect by clicking on it” and then select the area you want to inspect. Boom! All that drilling down the DOM tree has been done for you! Huzzah!
If you’re looking for an element that you know has an ID (such as <ul id="navigation">), or a specific HTML tag or attribute, click the binoculars icon (D) for “Finds a node to inspect by ID, tag or attribute” (You can also use Ctrl-F or Apple-F to do this if the DOM Inspector is the frontmost window) :
Type in the name and Bam! You’re there! Pressing F3 will take you to any other instances. Notice also, that when you click on a node in the inspector, it highlights where it is in the browser view with a flashing red border!
Now that we’ve found the troublesome node on the page, we can find out what’s up with it…
Step 2 – Debug that node!
Once the node is selected, we move over to the right hand panel. Choose ‘CSS Style Rules’ from the document menu (E), and all the CSS rules that apply to that node are revealed, in the order that they load:
You’ll notice that right at the top, there is a CSS file you might not recognise, with a file path beginning with “resource://”. This is the browsers default CSS, that creates the basic rendering. You can mostly ignore this, especially if use the star selector method of resetting default browser styles.
Your style sheets come next. See how helpful it is? It even tells you the line number where to find the related CSS rules! If you use CSS shorthand, you’ll notice that the values are split up (e.g margin-left, margin-right etc.).
Now that you can see all the style rules affecting that node, the rest is up to you! Happy debugging!!
About the author
Jon Hicks is a cheese/Star Wars/Mac obsessed freelance designer from Oxfordshire in the UK, that Pimps his Safari in what little spare time he has.
Your comments
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
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.
Wow. That’s really great. I had been using a Firefox extension (View Formatted Source), but this is much, much better—and built in!
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…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.
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.
wow, this is really cool! Didn’t know about that, thank you very much!
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.
Here’s another tool for CSS debugging: CSS Debugger
Hi am new to this. where can i download this am using Firefox 1.5 version.plz some one help me plzz.
sincerely urs
cool
Commenting is closed for this article.
24 ways is an edgeofmyseat.com production.
Edited by Drew McLellan and Brian Suda. Possible only with the help of our wonderful authors.Grab our RSS feed or follow us on Twitter for updates. Hosted by Memset.