A friend was asking about a Firebug-like plugin for Internet Explorer, and that got me thinking about the importance of being able to see how a particular browser is interpreting one’s CSS. While there are many good tools for developing CSS, there’s nothing better than actually trying things on multiple browsers. Fortunately, at least some developer tools are available for Safari, Firefox, and Internet Explorer.
I use Safari as my main browser and find its developer tools very useful. You can see the various CSS rules which apply as well as which properties were overridden by rules which have precedence. You can view the box model for the object (size, padding, border, and margin) as well as the DOM properties. Clicking on the image at the right will show you some of the things the Safari inspector will let you view. The Safari 4 inspector is even better. I use the newer version on one system and the older on another, and I only notice the visual differences if I look at the two side-by-side. The functional improvements, however, are really nice to have.
Google’s Chrome browser seems to be using the same inspector as Safari 4 (Chrome is based on the same engine), but it doesn’t have the Javascript debugger or the Database inspector. Also, while there’s a Resources tab, it doesn’t seem to function yet.
If you’re a Firefox user, Firebug is the way to go. While I like seeing the line number of a CSS rule, the Safari inspector’s search feature makes up for lacking that: 
it will search for the string not only in the HTML, but in supporting CSS and Javascript files, too (picture to the right). As an aside, the other Firefox plugin I find very valuable is LiveHTTPHeaders, which not only shows you the headers for the current page, but it keeps a log of all requests (including Ajax). While it’s handy to see the headers associated with particular objects (CSS files, images, etc.) you don’t see what happens with redirects as you do with LiveHTTPHeaders.
So this brings us back to Internet Explorer. If you’re using IE6 or IE7 then the Developer Toolbar is probably the way to go. It’s free and lets you inspect the computed style of any object on the page. Unfortunately, I wasn’t able to find how you view the various CSS rules rather than just the final computed style. If you’re trying out IE8, the built-in developer tools are very good, and are roughly in the same ballpark as Safari’s inspector and Firebug.
For Opera, Dragonfly looks like it also offers a rich set of developer tools.
Another reason I find it valuable to use the browser developer tools is that you get instant feedback. While one can use great tools such as BBEdit, TextMate, or CSSEdit with live viewing (a preview changes as you type, so no reloading), that view is still only using one browser engine. You can always make your changes, save, and reload the different browsers, but also being able to look to see how a particular browser is interpreting your CSS saves a lot of time. People who see some sort of CSS inspector for the first time almost always ask “where do I get that?” before leaving, because they see how effective those tools are.
