Debugging CSS in Google Chrome Debugging CSS in Google Chrome google-chrome google-chrome

Debugging CSS in Google Chrome


While you can not "debug" CSS, because it is not a scripting language, you can utilize the Chrome DevTools Elements panel to inspect an element & view the Styles pane on the right. This will give you insights as to the styles being overridden or ignored (line threw). The Styles pane is also useful because of it's ability to LiveEdit the document being inspected, which may help you iron out the issues. If the styles are being overridden, you can then view the Computed Style pane to see the CSS that is actually being utilized to style your document.

To bring up the Chrome DevTools window, hit Ctrl+Shift+I in a Chrome browser tab. (Command+Opt+I for a mac)

For more info visit https://developer.chrome.com/devtools/index


As CSS is not a scripting language, you cant properly debug it. Anyway if you know where it goes wrong you can try to tune it by hand.

Aditionally you've got the w3c validator here: http://jigsaw.w3.org/css-validator/ which may give you some feedback