Geek Answers Handbook

CSS debugging in Google Chrome

I write some CSS files, but when I make a mistake, Chrome seems to just silently ignore the parts that I messed up and does the rest.

This is annoying when debugging, because I cannot understand what is going wrong.

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

+8
debugging css google-chrome
source share
3 answers

Since CSS is not a scripting language, you cannot debug it. In any case, if you know where this is happening, you can try to configure it manually.

Also, you have the w3c validator here: http://jigsaw.w3.org/css-validator/ , which may give you some feedback

+1
source share

While you cannot “debug” CSS because it is not a scripting language, you can use the Chrome DevTools Elements panel to test an element and view the Styles panel on the right. This will give you an idea that the styles are overridden or ignored (the line is cast). The Styles panel is also useful because of the ability of LiveEdit to validate a document, which can help you troubleshoot issues. If the styles are overridden, you can view the Calculated Style panel to see the CSS that is actually used to style your document.

To open the Chrome DevTools window, press Ctrl + Shift + I on the Chrome browser tab. ( Command + Opt + I for mac)

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

+5
source share

CSS is not a script for the markup language, so we can’t determine the runtime, why don’t you check your CSS?

-3
source share

More articles:


All Articles