Debugging CSS in Google Chrome

Question

I am writing some CSS files, but when I make a mistake, Chrome appears to just silently ignore the parts that I screw up, and renders the rest.

This makes it annoying to debug since I can't figure out what is going wrong.

So, is there a way to get Chrome to "scream at me in big red letters," so that I can spend less time finding the error and more time fixing it?

Answer 1

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