Writing CSS is so much easier when you have access to a debugger or a CSS validator. These tools allow you to identify and fix anything that might be wrong with your code, and many of the developer tools also let you edit the content of a live site, which provides invaluable support during a re-design or when trying to find errors. Here are some of our favorite debuggers and validators:
This is an extension that can be downloaded and added to Chrome, Firefox, and Opera, and it will run on any OS that supports these browsers. It adds a toolbar to your browser that can be used to inspect your CSS elements in an effort to debug or test out changes.
2. Firebug
Firebug is a tool that can be used exclusively with Firefox to edit and debug any CSS, HTML, and JavaScript on live webpages. The tool can be used to find errors, filter your code, and tweak your CSS.
This powerful and useful editing and debugging tool comes with any Google Chrome installation. And can be used to edit, debug, and tweak your code.
If something is wrong with your CSS that you can’t quite pinpoint, a CSS validator is a great tool to make sure that your formatting is correct and that there aren’t any glaring errors.
5. CSS Lint
CSS Lint is a really useful validator that will not only validate your code, but you can always use it to pick and choose which errors and warnings to test for.