Blog CSS/CSS3 HTML/HTML5 Technology Website

Firebug-fight the css, html errors

Having problem with CSS issues?
Dont know which css, or class is causing what?
Is it the position, or the width, or the padding that puts my website in a chaos?

Recently even I was going through the same, when one of my colleague suggested a Firefox Add-on, Firebug.
Never heard of it? No problem, let me just brief you, and then you use it yourself 🙂

Firebug, helps to track css, html, and DOM views. It helps you view which html is currently loaded on the screen, which css sheets are loaded, and son on. Of course I know that as a developer you know whats getting loaded when, but wait I am getting to it.


This add-on, has an inspect tool, which while clicked in any place on the website, shows the html code and css sheet used for that part. Thats not all, you can edit it there and then and see the necessary changes.

Now isnt that interesting?

Now it didnt end here,
you can measure the each edge of the items you have on the webpage, with rulers and guides which are built in, in this addon.

It also has a Networking Monitor, which helps you to look out for the loading of the page, the scripts, the images, and so on.

Helps you know the errors in the javascripts, and explore the files through DOM.

And to conclude it has Search option, which helps you search that file which you looking for, in your website project.

Now go ahead, what are you waiting for?

Download here

If you are using, Internet explorer, not to worry, just,

Include the following code at the top of the <script type="text/javascript" src=""></script> of your page:

else, download Firebug Lite and include the following code at the top of the <script type="text/javascript" src="/local/path/to/firebug-lite.js"></script> of your page:

If your using Google Chrome, then here’s the solution
Also read:
Speed up your webpages


Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.