Debugging CSS in Google 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?

Answers


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


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


Need Your Help

XAML element binding between 2 files?

c# wpf xaml binding

Suppose I have a two textboxes in the same XAML file. I want the input in textbox 2 to come from whatever I type in textbox 1.

Activity not starting when using putExtra()

android marker

I am clicking marker and i am trying to open new activity. I can open activity when i dont putExtra information in intent but when i try to sent to 2nd activity 10 strings it shows me this: