Geek Answers Handbook

Is it possible to debug CSS?

I am new to CSS. Is there a tool that can help debug CSS styles applied to a web page.

How can you debug CSS and solve problems when some elements on the page do not appear as they should? Right now, I have to painfully comment on CSS declarations one by one to understand how styles become rendered.

+6
debugging css
source share
9 answers

In browser:

  • Firefox has a Firebug plugin. It is easy to install and very powerful. This is even better when combined with Web Developer for Firefox.

  • Internet Explorer has a developer toolbar that is not as good as Firebug, but good enough to verify that it still works in IE. In addition, there is a tool called the IE DOM Inspector. There is also a version of Firebug for IE entitled Firebug Lite.

  • Google Chrome comes with built-in tools like Firebug. See the "tools-> developer" option in the drop-down menu to the right of the address bar. This allows you to see the CSS rules used by each element. It also supports Javascript for debugging.

  • Safari uses the Web Inspector tool.

  • Opera has a built-in Dragonfly utility.

+15
source share

You use Firebug in Firefox, which makes debugging a lot easier.

+15
source share

And the built-in DragonFly in Opera.

+5
source share

You can use the Firebug plugin for Firefox. This is very useful for CSS. You can dynamically enable and disable styles and fields from styles. It's great.

+3
source share

If you are not using Firefox, you can now get Firebug Lite , which you can use in IE, etc.

+3
source share

Web development tools like Safaris Web Inspector or Firebug for Firefox can help you debug your CSS. These tools can show you the cascade of rules that apply to a specific element and allow you to change or disable certain properties.

+2
source share

Use Firefox to first develop and test your CSS, and then switch to other browsers to test your code. This is a common IMHO method. Firebug is great, but it works even better if you combine it with a web developer for FF.

There is a great site worth checking out with lots of CSS and HTML development information.

0
source share

When you need to debug issues specific to IE. I heard that people speaking IE DOM inspector are not so bad. You can also try the tools described in this post .

0
source share

Now you can use my recently released tool for this in most modern browsers!

Visualizer HTML Document - GitHub

0
source share

More articles:


All Articles