Menu
I am a CSS newbie. Is there a tool that can help debug CSS styles applied to a web page.
How does one generally debug CSS and resolve issues when some elements on the page are not appearing as they should? For now, I have to painfully comment out CSS declarations one by one to understand how the styles are getting displayed.
656
A fast way to debug our CSS selectors for a web page is through the Console of the browser's Developer Tools. To access developer tools in our browser, all we have to do is press F12. We can then navigate to the Console and use JQuery to debug our selector(s).
Press Ctrl + Shift + i for Windows/Linux (or command + option + i for Mac). Right-click on an element on your website page and select Inspect. Now that you are familiar with accessing Google Chrome Developer Tools, you will be able to inspect CSS elements to modify them live.
A quick way to find errors in CSS code is to install the Web Developer tool bar add-on and use the validator through the tools drop down. What's cool about this tool is you can quickly validate local files too as it will automatically upload them to the W3C validator.
By browser:
Firefox there is a plug in module called Firebug. It is easy to install and very powerful. It is even better when combined with 'Web Developer' for Firefox.
Internet Explorer has a Developer Toolbar, which is not as good as Firebug but good enough to check things still work in IE. Additionally there is a tool called IE DOM inspector. There is also a version of Firebug for IE caled Firebug Lite.
Google Chrome comes with built in tools similar to Firebug. See the 'tools->developer' option in the pull down menu to the right of the address bar. This allows you to see the css rules used by each element. It also has Javascript debugging support.
Safari uses a tool called Web Inspector.
Opera has a built-in utility called Dragonfly.
190
You use Firebug in Firefox, which makes debugging a lot more easy.
45
And built-in DragonFly in Opera.
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
