Skip to main content

Edit and Debug HTML and CSS with Firebug

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?

If you are not aware about the firebug then I would like to convey you that, this is a very good Mozila Firefox add-on which you can use in your web development to make your life much easier. With the help of firebug you can debug/Edit your html, CSS and JavaScript in Firefox browser very easily and effectively. You can debug and get preview of your webpage at same time.

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.

firebug snapshot

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.

  1. Right Click the area where you have design problem. In my case Ihave the problem with the highlighted box which is not aligned properly.

    Edit and Debug HTML and CSS with Firebug
    firebug html editing
  2. 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.
  3. Now you can see thehighlighted html in thefirebug is
    and in the HTML view of your site you can see the transparent overlay on the area which is generated by the same div.
  4. 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.
  5.  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.
  6.  Now I am sure and require to change in my original file on the server to see the changes live.
  7.  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.

Support Me by Sharing This Article

Ankur Kumar Singh

I am a PHP programmer having some knowledge about Linux. I am always interested in web development and knowledge sharing. I am full time tech evangelist part time human being. :-)

4 thoughts on “Edit and Debug HTML and CSS with Firebug

  1. Very helpful tutorial. I really love this.
    But hope to get some depth knowledge of firebug. Please post some more tutorial about the firebug. Like how to debug javascript in fire.

    Thank You

  2. This is a comment to the admin. Your website:Edit and Debug HTML and CSS with Firebug – Techflirt is missing out on at least 300 visitors per day. I discovered this page via Google but it was hard to find as you were not on the front page of search results. I have found a website which offers to dramatically increase your traffic to your site: http://voxseo.com/traffic/. I managed to get over 10,000 visitors per month using their services, you could also get lot more targeted visitors than you have now. Hope this helps 🙂 Take care.

  3. Hello………………Your tutorial about “Edit and Debug HTML and CSS with Firebug” is good but can you please describe it more.
    I mean there are a lot of tabs available in it like dom,net,layout,computed so what is contained ?
    How and when we can use it?

    The tutorial you provided is very good but if possible please explain them as well .

    Thanks

Leave a comment/Ask Question

shares