Top Tools to Debug Your CSS

Published August 28, 2016 by CSS Newbies.

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:

1. Web Developer Extension


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

Screen Shot 2016-08-22 at 7.14.51 PM

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.

3. Google Developer Tools

Screen Shot 2016-08-22 at 7.22.06 PM

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.

4. W3 CSS Validation Service

Screen Shot 2016-08-22 at 7.27.49 PM

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

Screen Shot 2016-08-22 at 7.31.59 PM

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.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>