Here’s an introduction to Firebug, which is used primarily for debugging client side scripts in real time and reducing development time. It also helps in creating bug-free code that can run across leading browsers seamlessly.
Firebug is a plug-in or add-on to the browser. What this means is that it has the same level of access and control on the Web page being rendered, as that of the browser entity. Firebug runs in the same security context as the browser, which gives it complete control on the objects and DOMs (document object model) created within a Web page.
The latest version of Firebug has advanced features such as editing CSS templates and adding attributes in real time, and viewing their effect on the Web page, dynamically. The developer can leverage this feature to try all style sheet combinations, check their effect on the user experience, ensure accuracy and then, accordingly, make changes in their release codes. This is a great help when trying out various style sheet objects such as table widths, foreground and background colours, fonts, etc. The newer versions can also help in object stack tracing for advanced developers.
While there are no strict pre-requisites for Firebug installation, the computer must have the Firefox browser installed, preferably the latest version. It is important to ensure that no previous installations of Firebug are present, and if they are, they should be removed.
The latest version of Firebug can be downloaded from getfirebug.com/downloads and installed. Upon installation, it is advisable to close all browser instances and restart the browser.
Firebug can be opened in any one of the following three waysby clicking on the icon on the right hand side of your browser’s navigation bar; by using a shortcut key (default : F12), or by right-clicking the mouse button and selecting ‘Inspect element with Firebug’. You can open it in a new window by clicking ‘Open firebug in new window’, i.e., the maximise button or as a bar at the bottom of your browser. This opens up a Firebug panel dashboard, which typically occupies the bottom half of the screen. Please refer to Figure 1, which shows a sample dashboard.
Now let’s look at how to use this panel for debugging purposes. To explain better, let’s open the home page of Facebook. Once the page loads up, open up the Firebug panel and from the top menu of the panel, click the second button from the left, which reads Click an element in the page to inspect. This enables the highlighter on the browser page; so use the mouse to highlight the section to be debugged and click the mouse button.
Now let’s look at a few advanced features of Firebug. As you can see on the panel, it has multiple views to drill down into the code, based on which code area needs to be targeted for debugging. There are two HTML panes, i.e., the Node view pane and the HTML side panels.
The Node view, which is on the left, allows you to inspect and modify the HTML tags of the page. When you hover the mouse over the HTML tags, it shows a section being highlighted on the page, which points to the location of elements placed on the page.
HTML side panels are on the right, and give more information about the styles of the highlighted elements.
There are four side panels: style, computed, layout and DOM.
Style: It shows you which CSS lines affect what part of your code. It also shows which style sheet effects correspond to that part, along with the line numbers. Computed: It shows the CSS with properties such as font size, type, alignment, etc. This gives information about how HTML renders that element.
Layout: It shows you the graphical box model of the element that you have clicked. It helps you to modify the values of the padding, margin and border by double clicking on it in real time.
DOM: It shows the document object model of the selected element. It’s useful for advanced client-side script debugging.
The main difference between styles in the HTML panel and CSS view is that it allows you to work on all CSS styles, and not just the highlighted one.
The Document Object Model is a great big hierarchy of objects and functions. Firebug helps you find DOM objects quickly and then edit them on the fly.
It gives information about how long it will take for your page to load or which request takes more time to load. The slowness of page loading can be attributed to static code, references to other pages, heavy images, etc. Net view helps you to pin point the exact section of a file which is slowing down the performance. It also gives suggestions regarding which images should be compressed for better performance, etc.
The cookies panel shows you the cookies on your current or selected page. You can deny cookies for a particular site, create cookies and also delete cookies, on the fly. Besides these features, there is a search box available on the panel which can be used to find elements or the sections of code being debugged. The panel dashboard can be detached from the browser, and be placed on screen as a floating entity for ease of use.
While Firebug is a self-contained environment for debugging, there are a few limitations which will hopefully be fixed in future versions. First, the CSS panel doesn’t allow the edit option. Second, while debugging HTML elements with hover properties, it is cumbersome to use Firebug to highlight a particular section and debug it. This is true in case of client-side slide show containers, which may or may not be using JQuery.