Developer’s Notebook: Find computed styles in IE, Firefox, Opera or Safari

Brian Dillard, Monday, May 5, 2008 @ 3:58 pm

At my recent Web 2.0 Expo talk, I exhorted developers to get comfortable outside the Firebug/Firefox safety zone. By rotating between Opera, Safari and even IE as our primary development environments, we can really get to know those browsers - and perhaps learn to utilize their non-standard features. Switching things up, however, can inhibit productivity until you learn your way around each browser's tools.

To that end, I offer these step-by-step instructions for finding computed styles in all four A-grade browsers. I chose the display of computed styles as my "debuggers are cool" use case because it's an obscure but useful feature for CSS debugging. Most of the time I can debug styles by looking at my debugger's snapshot of the current cascade for a given element. But sometimes that's not enough. If I've assigned a value of "inherit" to the font-family of an element, then the cascade snapshot won't tell me what font is actually applied to that element. (Not being a designer, I often can't tell the difference between various sans-serif faces, especially at small sizes.) Luckily, computed styles can give me the information I need.

As these examples demonstrate, debugging tools have come a long way in the last couple of years. Let's make the most of them for all of our UI-layer needs.

Internet Explorer 8 and DebugBar

500

IE's JavaScript debugging tools have finally matured, but its CSS ones lag behind. Even IE8, with its built-in debuggers (under Tools > Developer Tools), won't show you computed styles. Luckily, Jean-Fabrice Rabaute has crafted DebugBar, an plugin for Internet Explorer 5+ that adds all sorts of useful tools. Install DebugBar, fire up your version of IE and choose View > Toolbars > DebugBar to make the plugin visible. Then click the "DebugBar" icon in the resulting toolbar to open the DebugBar sidebar. You'll see two tabbed panes, one below the other. Choose the "DOM" tab on top and the "Comp. Style" tab on the bottom. In the upper pane, you should see a target icon with the caption "Drag target on document to find element." Drag the icon anywhere on an open web page and you'll see computed styles for the corresponding element in the bottom pane of the sidebar.

Opera 9 Developer Console

Opera's JavaScript console has a dedicated menu item (Tools > Advanced > Error Console), but its other developer tools must be installed by way of a bookmarklet. To do so, choose Tools > Advanced > Developer Tools (or visit this URL). From the web page that comes up, drag the "Developer Console" button onto any Opera toolbar. Thereafter, click the resulting bookmark to summon a popup window containing a number of useful tools, including a DOM assistant structured much like DebugBar's. To find computed styles, choose the DOM tab in the top pane and select the checkbox for "find element with click." Click on any element in an open web page, then choose the "Styles" pane in the bottom of the developer console. Voila: computed style information for the element you clicked.

Safari 3 Web Inspector

Safari for the Mac ships with a Debug menu, but it's not enabled by default. To enable it, fire up the Terminal and execute the following command:

defaults write com.apple.Safari IncludeDebugMenu 1	

Relaunch Safari and you should see a Debug menu to the right of the Help menu in the top menu bar. (For more on enabling the Debug menu, including alternate means of doing so, check out this Mac OS X Hints thread.) You can now launch Web Inspector, Safari's version of a DOM viewer, by right-clicking on any element in an open web page and choosing "Inspect Element." This launches Web Inspector in a new, three-pane window. You'll see the DOM tree, expanded to show the clicked element, in the middle pane. Computed styles should be visible in the top of the right pane, under "Styles." (You can also launch Web Inspector by choosing Choose Debug > Show Web Inspector.)

Firefox 3 and Firebug

Firebug probably needs no introduction. This fabled Firefox plugin adds a full-service JavaScript, DOM and CSS debugger to Firefox. It can be launched in its own pane at the bottom of the browser window or broken out into its own popup window. Now that Firefox 3 almost through the beta process, most extensions offer versions that are compatible with Firefox 3. For Firebug, that compatible version is Firebug 1.1 beta. To install Firebug 1.1 beta, get yourself over to the Firebug site and follow the normal Firefox extension installation process. Since you're downloading an extension from someplace other than the Mozilla Add-ons site, you may get a popup warning you that a third-party site is trying to install an extension. Grant permission to the Firebug site to do so, and you should be good to go in Firefox 3 Beta 5.

I always knew that Firebug could show you the current style cascade for a given element, but I only recently learned how to look at computed styles. To begin, open the Firebug pane by choosing Tools > Firebug > Open Firebug (or clicking the Firebug icon in the status bar). Click "HTML" in the Firebug console menubar, then click "Inspect" in the set of commands above the menubar. Now click on any HTML element. Information about that element should appear in the right side of the Firebug pane. Click the "Style" tab in that pane and you should see the current cascade. To see computed styles, click on the "Options" link to the right of the tabs and check "Show Computed Style."

agile ajax

Comments: 2 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. 

   Thanks for this tip, Brian! I’m going to mess around with this one right away!

   Comment by Graeme, Tuesday, May 6, 2008 @ 2:18 pm

2. 

   [...] Pathfinder Development » Developer’s Notebook: Find computed styles in IE, Firefox, Opera or Safa… Developer’s Notebook: Find computed styles in IE, Firefox, Opera or Safari [...]

   Pingback by css computed styles … | 2-cents, Wednesday, June 18, 2008 @ 2:29 am

Leave a comment