Beginners Guide to Firebug
Ok, now that we have established exactly why Firebug is useful it is time to look into its usage. We will handle the very basics of how to install it first. Firefox is a very fast, secure and light weight open source browser that many web developers would agree is decades ahead of Internet Explorer (and Safari on security). It is about the same type of level, maybe a little higher, than that of Opera.
I would strongly recommend you install Firefox as a permanent browser if you haven’t already. After you have installed Firefox (or already have it installed) you need the Firebug extension from here. Once this has finished downloading and installing the browser will be restarted. Once the browser has been restarted you are ready to learn Firebug.
Note: To enlarge any small images in this tutorial just click on them and the image will open up.
To access Firebug
There are three ways to access Firebug:
- Either by clicking the bug icon () in the bottom bar
- Or by using Tools->Firebug (can access all features of Firebug from here including some settings)
- Or, lastly, by right clicking on any part of the page and choosing “Inspect Element”:
The main window of Firebug (click on the image to see a larger view):
For this tutorial we will be focusing on the HTML, Script and Net tabs. These tabs are easily for most important for a beginner web developer to understand. The other three tabs Console, CSS and DOM are all self explanatory and provide no specialized tools. I should mention that some of these tabs are in fact disabled by default. To enable any tab which is disabled just click the little down arrow in the tab and select “Enabled”.
You can edit the CSS for each element on the page within this HTML window by moving over to the right pane (the pane showing the CSS) and clicking a property or value. As an example I have a property:- “width:750px;” if I click the “750px” value of the width property I can edit the value however if I click the property itself I can edit its existence. The best part about this feature is that it changes the CSS in real time. This makes it great for changing CSS to fit Firefox and IE perfectly. Below you will see a brief example of dynamic CSS modification (click on the images to see a larger view):
So in this section you now understand that Firebug can allow you to dynamically debug HTML and CSS whether it be dynamic or static code. You should also understand the basics of how to accomplish the debugging now.
The Net tab is a very handy tool which allows the developer to understand what requests are being made, when, how and speed of each process of the request (i.e. queuing, request and response):
The Net tab can also be used to calculate network values such as bottleneck bandwidth, congestion windows and overall RTT making this tool extremely invaluable for checking URLs and diagnosing networking problems within your server.
You can select scripts by clicking on the sub tab bar below the main tabs. This will allow you to sort the scripts into different types and eventually select just one script. In order to debug the script you must add breakpoints to it so when you have chosen the script you want to debug just in the margin of any line within the pane showing the script. Once you have done this run the script (by either refresh or clicking on a link, really depends how the script is launched) and you will see that the script has now stopped on the first processable breakpoint. In the top right hand corner of the script pane you will see a play, pause and stop button. If you use the play button it will play through the breakpoints whilst pause pauses the script and stop ends all processing (much like adding a return;).
When debugging you will notice that the right hand pane will show debug information. This debug information will allow you to see exactly what the DOM is doing at that point allowing you to not just debug variables but also states from specific HTML/CSS elements to page wide processing.
Note: There are no screen shots as of yet since I needed to reformat my server recently and have no yet uploaded my site to it 😦
Firebug is an extremely useful tool which will allow you to do almost anything needed to check a websites running status. We only explored the basic areas in this tutorial and there is still much more for you to explore within this Firefox extension, however, now that you have a basic grasp of Firebug you should be able to play around with it and understand what everything is doing. There are add-ons for Firebug itself like a CSS overlay that allows you so overlay an image on your current page and align the CSS to match correctly but as always it is now up to you to play and tinker with it as you need, you are the professional now. Enjoy 🙂