cssdebugginggoogle-chrome
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?
There is a Firebug-like tool already built into Chrome. Just right click anywhere on a page and choose "Inspect element" from the menu. Chrome has a graphical tool for debugging (like in Firebug), so you can debug JavaScript. It also does CSS inspection well and can even change CSS rendering on the fly.
For more information, see https://developers.google.com/chrome-developer-tools/
In the newer versions there is a "format" button that prettifies the source:
(only just realised myself :P )
Best Answer
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