CSS Debugging Tools and Resources
By B Lingafelter CSS, tools
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
Install the Firebug addon for Firefox. Grab the Codeburner addon from Sitepoint to add HTML and CSS reference documentation to Firebug.
Tutorials
- Quick and Easy CSS Development
- Debug and Tune Applications on the Fly with Firebug - older version of Firebug but still useful information
Videos
- Intro to Firebug
- Tutorial on Using Firebug - No audio, but shows selecting html elements and debugging CSS.
- Using Firebug to Live Edit CSS
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
- Google Chrome Developer Tools Tutorial
- Web Inspector Updates
Internet Explorer: Developer Tools
Developer Tools are integrated into IE8. To access them: select Tools > Developer Tools (or press F12)
Tutorials
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