Home > Tutorials and Resources > CSS Debugging Tools and Resources

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.



Chrome and Safari: Web Inspector and Developer Tools

To access in Chrome:

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

To access in Safari:

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


Internet Explorer: Developer Tools

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


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