Home > Tutorials and Resources > CSS Debugging Tools and Resources

CSS Debugging Tools and Resources

Debugging the CSS issues on your web pages can be a long and often frustrating task, but you'll find it much easier to debug CSS by using the available tools listed below. Each of the current browsers have integrated tools or addons that provide essential tools you can use to debug your web pages. While debugging HTML and CSS is likely your first priority, many of these tools are also helpful for debugging your scripts, and other aspects of web pages.

Firefox: Firebug addon

Go to https://addons.mozilla.org/en-US/firefox/addon/1843/ and install Firebug. Grab Codeburner https://addons.mozilla.org/en-US/firefox/addon/10273/ from Sitepoint to add HTML and CSS reference documentation to Firebug.

Tutorials

Quick and Easy CSS Development http://www.tutorial9.net/web-tutorials/quick-easy-css-development-with-firebug/
Debug and Tune Applications on the Fly with Firebug http://www.ibm.com/developerworks/web/library/wa-aj-firebug/ - older version of Firebug but still useful information

Videos

Intro to Firebug http://vimeo.com/12627807
Tutorial on Using Firebug http://vimeo.com/3217224 - No audio, but shows selecting html elements and debugging CSS.
Using Firebug to Live Edit CSS http://vimeo.com/12258360

Chrome and Safari: Web Inspector and Developer Tools

To access in Chrome:

Windows (or Linux): Select the Page Icon (or Wrench) > Developer > Developer Tools
Mac: Select View > Developer > Developer Tools

To access in Safari:

Select Edit > Preferences (Windows) or Safari > Preferences (Mac)
Select the Advanced tab
Check Show Develop Menu in menu bar
A new menu item, Develop, will appear in menu bar
Select Develop > Show Web Inspector

Tutorials

Why Web Developers Should Switch to Google Chrome http://net.tutsplus.com/articles/general/why-web-developers-should-switch-to-google-chrome/
Google Chrome Developer Tools Tutorial http://dev.chromium.org/devtools/google-chrome-developer-tools-tutorial
Web Inspector Updates http://webkit.org/blog/829/web-inspector-updates/

Internet Explorer: Developer Tools

Developer Tools are integrated into IE8. To access them: select Tools > Developer Tools (or press F12)

Tutorials

Discovering Internet Explorer Developer Tools http://msdn.microsoft.com/en-us/library/dd565628%28v=VS.85%29.aspx
Debugging HTML and CSS with the Developer Tools http://msdn.microsoft.com/en-us/library/dd565627%28v=VS.85%29.aspx

To use the Developer Tools in IE7 or IE6, download from Microsoft's website http://www.microsoft.com/downloads/en/details.aspx?FamilyID=95e06cbe-4940-4218-b75d-b8856fced535 and follow the tutorial http://www.15seconds.com/issue/070208.htm to install in IE7 or IE6.

Opera: Dragonfly

To access:

From Opera's red menu button, select Page > Developer tools > Opera Dragonfly
From the menu bar, select Tools > Advanced > Opera Dragonfly

Tutorials

Introduction to Opera Dragonfly http://dev.opera.com/articles/view/introduction-to-opera-dragonfly/