CODEWITHSUNDEEP
cssdebugging
Rahul
Rahul

Reputation: 13056

Is it possible to debug CSS?

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.

Upvotes: 6

Views: 519

Answers (9)

Gabriel McAdams
Gabriel McAdams

Reputation: 58251

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

HTML Box Visualizer - GitHub

Upvotes: 0

Howard May
Howard May

Reputation: 6649

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.

Upvotes: 15

ya23
ya23

Reputation: 14496

When you need to debug IE - specific problems. I've heard people telling IE DOM inspector is not too bad. You can also try tools described in this post.

Upvotes: 0

foo.bar
foo.bar

Reputation:

Use Firefox to develop and test your CSS first, then switch to other browsers to test your code. This is a generally accepted method IMHO. Firebug is great, but it works even better if you combine it with Web Developer plug in for FF.

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

Upvotes: 0

sabiland
sabiland

Reputation: 2614

And built-in DragonFly in Opera.

Upvotes: 5

Fermin
Fermin

Reputation: 36081

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

Upvotes: 3

Gumbo
Gumbo

Reputation: 655189

Web developer tools like Safari’s Web Inspector or Firebug for Firefox can help you to debug your CSS. Those tools can show you the rule cascade applied to a specific element and allow you to change or disable particular properties.

Upvotes: 2

Luixv
Luixv

Reputation: 8710

You can use the Firebug plugin for Firefox. It is very useful for CSS. You can dynamically switch on and off styles and fields from styles. It is great.

Upvotes: 3

Razzie
Razzie

Reputation: 31222

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

Upvotes: 15

Related Questions