I am using firebug for last 4 years. It is a life saver tool for web designers and developers. In this post I will try my level best to explain the best use of the firebug and will share my experience.
What is Firebug?
Basic Installation and Use
You can download firebug by https://getfirebug.com/downloads/ and select the appropriate version for you. Also you can directly install this tool in Firefox by opening url http://getfirebug.com in your Firefox. Once you will open this URL in Firefox you will get a button to install firebug. Once your installation is completed you can see this add-on by going to menu Tools ->Web Developer ->Firebug -> Open Firebug or you can directly open using function key F12. Below is the window section you in the browser in the footer part.
You can see that the left side is HTML and you can click on any html in the left side and you can see the CSS property attached with that tag in right side. You can even edit the property of css or add any other property in the css and you can see the effect of changes at the time of changing the CSS as well. But be careful that this is the debugging tool and it will only show you on the temporary basis for your reference so that you can play with the css here and implement the final thing in your file. It is really helpful if you are adjusting something like height or width of some section or planning with alignment. Wow this is really great too.
Debug You HTML and CSS with Firebug:
In this section I will demonstrate you to debug your website html and CSS with Firebug. I am going to demonstrate the complete process by going to debug my website http://www.techflirt.com or probably you will have your own on http://localhost or any other website. To start debugging first we need to open Mozilla Firefox and enter the website page URL which you need to debug. Once page get fully loaded you can follow the following steps with me.
- Right Click the area where you have design problem. In my case Ihave the problem with the highlighted box which is not aligned properly.
- Once you will right Click you can find the option “Inspect Element with Firebug” . Click on “Inspect Element with Firebug”. A firebug window will be opened attached your browser like below.
- Now you can see thehighlighted html in thefirebug isand in the HTML view of your site you can see the transparent overlay on the area which is generated by the same div.
- Now div is using CSS class “post-excerpt” in the right side of the firebug you can see the class which is applied on the div. All class shown is contributing some property in the div.
- In my case I feel that padding-left property of the class has made my alignment wrost so I have changed it to 0px and got the alignment issue fixed.
- Now I am sure and require to change in my original file on the server to see the changes live.
- On every CSS class section in the firebug you can see the blue url so you can directly identify the css file in which the class is written and the line number so that you can quickly change that.