There are various tabs available in default window of Firebug. Console, HTML, CSS, Script, DOM & NET. Using Console you can see the error or you can watch value of a print statement. HTML tab will show you the current page HTML source code. Here you can add or edit HTML in real-time. CSS & Script tabs is similar to HTML tab functionality. Using this tabs you can watch related CSS & JS files. If multiple CSS or JS files attached to your page you can use dropdownlist (shown in top bar) to select the required file. DOM tab presents Document object model hierarchy. Net tab is useful to track network related responses.
How to use Firebug?
1. Without interacting with the real source code you can use inspect elements to edit HTML & CSS. This process saves lot of time & efforts. Also it reduces the chance of risk to work directly with files. In case you want to test some HTML or CSS related changes you can do this in real-time using Firebug. Once changes are done properly you can copy the codes to related files.
Let’s take a case where you want to adjust a div height just similar to an image height. In this case without using Firebug you need to measure the image height & then you will update the height for the div. But using firebug you can update the height attribute in real-time. When the height will look similar you can copy that value to your code file. This approach is programmers friendly & saves time.
2. During development some time it is difficult to know where CSS boxes are located. In this case Firebug is very helpful. Firebug has its own eyes. While you select the block of code it will show you how much areas the CSS box model affects in your HTML. Look at the below image you will get idea how it works.
3. To optimize a web page it is mandatory to observe network activity. I mean which process or resource takes how much memory & time to load. Firebug is rich with this facility. Using its network monitoring tool you can easily know which thread breaks performance. To guide you how to perform network checking look at the below image.
Using Firebug network observation tool you can know the Status (Request is Fail or Passed), From which domain response backs, Size of the file & Timeline (How much time the resource need to load).
5. During web development unknowingly we left many errors in page. Thanks to Firebug which helps to detect all those error for a error free web page. To know about the list of errors you page has. Go to Console window & all errors tab.