Debugging, Quick Development of CSS using Firebug

When I learned CSS it was extremely tough for me to adjust the exact CSS style for a web page to work with JavaScript and XHTML. Although I am not a designer, I am very much interested about CSS for its simple and easy coding style as well as main design language for a web page. I remember the days when I didn’t know how to modify or examine the CSS codes on the fly. Every time i got bug related to CSS I had to change code of style-sheet and then upload into ftp and then try again…whew..the boring work to be done. Then I learned how to catch and fix the CSS bug on the fly using firbug. When you run a script in the browser then you can’t say what exactly the problem is whether it is problem with padding or something else. Or you may try the different ‘img src’ to try whether it is fit for the page or not. Those thing can be tested without changing the codes in the style-sheet but changing the codes in the browser itself. sound funny?? Let me explain how?

Most of us, who are programmers, know about firebug. Who doesn’t know, Firebug is a development tool for firefox which is also called add-on of firefox what will help to modify CSS, XHTML, JavaScript live on the browser(firefox).
Tools you need

  • Firebug installed in the browser(firefox)
  • any page consist of xhtml and designed with CSS open in the browser

Firebug icon in the browser:
After installing the firebug you can see there is one icon look like firebug in the bottom right corner of your browser. To open and close the firebug you can click that button. Here is the screen shot.


Inspecting the CSS in firebug:
Here comes the interesting part of the CSS development. After clicking in the firebug button a new small window will comes up at the bottom of the browser. Just like the screen shot.
firebug screen
Left upper corner of the firebug screen there are three button. First one is all about firebug which is a firebug button. Second one is inspecting button with a small cursor. If you click that button and mouse over anything in the page then the whole xhtml or html structure will e displayed in the mini window of firebug which is just after the firebug window navigation bar. Assume you want see the CSS of any website’s or your web page’s heading pictures and CSS for your header.html which you include in the main file and visible when you open the index.html file. Just open the file you want to look up through firebug and open the firebug by clicking firbug button and then click the inspect button. Mouse over in the main browser page what you want to inspect. click to stick with that specific div or table to look after the structure carefully and to change it in the firebug window. Now come and look at the firebug window. You can see the xhtml structure in the left and CSS in the right, What you mouse over and clicked in the main browser page. here are some screen shots to make it clear.
HTML Part:

html part
CSS Part:
css part


About Mazharul Anwar

A PHP and javascript nerd believe in web applications and open source goodness. Ex MS Windows user converted to linux fanboy and love gadgets. Coding in python and maintaining servers become my passion. Website performance and optimization geek.
This entry was posted in Programming and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s