{"id":3006,"date":"2016-08-28T11:53:57","date_gmt":"2016-08-28T16:53:57","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=1923"},"modified":"2016-08-28T11:53:57","modified_gmt":"2016-08-28T16:53:57","slug":"top-tools-to-debug-your-css","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/top-tools-to-debug-your-css\/","title":{"rendered":"Top Tools to Debug Your CSS"},"content":{"rendered":"

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:<\/p>\n

1. Web Developer Extension<\/a><\/p>\n

\"menu-1200\"<\/p>\n

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.<\/p>\n

2. Firebug<\/a><\/p>\n

\"Screen<\/p>\n

Firebug is a tool that can be used exclusively with Firefox to edit\u00a0and debug any CSS, HTML, and JavaScript on live webpages. The tool can be used to find errors, filter your code, and tweak your CSS.<\/p>\n

3. Google Developer Tools<\/a><\/p>\n

\"Screen<\/p>\n

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.<\/p>\n

4. W3 CSS Validation Service<\/a><\/p>\n

\"Screen<\/p>\n

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\u00a0is correct and that there aren’t any glaring errors.<\/p>\n

5. CSS Lint<\/a><\/p>\n

\"Screen<\/p>\n

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.<\/p>\n

Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n

Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":2764,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[174],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3006"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=3006"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/3006\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media\/2764"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=3006"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=3006"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=3006"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}