Firefox

Firebug Tutorial

Beginners Guide to Firebug

Firebug is an invaluable tool to any web developer. It is an extension for Firefox which allows the developer to understand the workings of a site, be it their own site. Let me give you an example of how Firebug works:- say you have a piece of JavaScript that should work (in theory), however, it does not work. Firebug will allow you to debug that code with break points and understand exactly how the code is behaving. This is just one example of many different uses of how Firebug can save your butt and other examples include CSS, HTML, AJAX debugging and even live CSS editing (from a pre-cached version of the page).

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 (Firebug) 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 Firebug

The main window of Firebug (click on the image to see a larger view):

Freibug Main Window
Firebug Main Window

Along the top of the Firebug window you will notice a menu type control. These are tabs which lead onto each section of Firebugs control:
Firebug Tabs

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”.

HTML Tab

The window you see currently showing in Firebug is the HTML/CSS inspector. This is a very useful tool. In the left pane you will find all the source code for that page (dynamic source as well, not just static source). What do I mean by dynamic and static source code? Static source code is code that was in the page to begin with and never changes whilst dynamic source code is code which may or may not have been in the page from the beginning that changes due to a state change; either through JavaScript or general CSS properties. You can use the left pane to select each element and see it’s different CSS properties within the right pane. Each time you hover over an element Firebug will show that element (along with visible CSS properties, such as margin and padding) on screen.

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):

Before CSS Changes
Before CSS changes
After CSS Changes
After CSS Changes

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.

Net tab

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):

Net Tab
Net Tab Showing AJAX Request to Update this Posts Content

As you can see within the screen shot the Net tab will show all requests, however, using the sub tabs (just below the main tabs) you can sort the requests into individual types such as HTML, CSS and JavaScript. When you hover over one of the requests RTT diagrams it will show a key allowing you to understand exactly what each color means. This tab will also show header information and will tell you exactly what address is being used when the request is being made which is extremely helpful when using mod_rewrite or other URI rewriting extensions.

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.

I will finish this section with a brief example of how I would use it:- imagine I had just made a new mod_rewrite rule that pointed to /knowledge/articles/article, however, when article is displayed the CSS and JavaScript does not show. I can use Net tab to understand that what is happened is my rewrite rules have not been modified to accommodate the extra /knowledge/ at the beginning of the knowledge base URLs.

Script tab

Now we come onto what has to be one of best parts of Firebug (for me), the Script tab. Using the Script tab you can debug ALMOST any JavaScript. Yes, that is almost; there is one warning that comes with the debugging tool. You cannot debug AJAX functions in their form, or at least AJAX functions within a library (such as JQuery AJAX functions). I do believe I know why, due to header information being sent the server is not designed to pause like JavaScript can and so without further information the server discards the header information and the AJAX request is not completed.

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 😦

Conclusion

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 🙂

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s