Once you have installed the extension, you can access it from Tools menu or using the shortcut F12 or by clicking on the bug icon in the status bar of Firefox (Ctrl + F12 to open in a new window). Since it consumes considerable amount of resources and slows down the browser, you can disable it during normal browsing by right-clicking on the icon and clicking on suspend. You can also add specific sites to Firebug from theConsole menu. It is because of this reason that the console panel is disabled by default, you can also disable Script and Net panels if you find the performance susbtantially degraded. However, assuming that everything goes on fine let us explore the features of Firebug and how it can assist in Web development.
The first tab displayed in Firebug interface is “Console” which replaces the Firefox error console with a much more advanced one. It not only allows you to view Javascripterrors but also has a Command Line Interface (look for >>> at the bottom) where you can call Javascript funtions and view result in the Console panel. You can also use theConsole programatically by accessing the various properties and methods exposed byConsole API.
For instance :
console.log(“%s is an extensionof %d”, “Firebug”, “Firefox”);
Prints
Firebug is an extension of Firefox
This feature can be of great help to developers for measuring Javascript performance as well as identifying bugs. A list of Console APIs can be found here
HTML Tab shows the HTML code as an indented heirarchy of DOM nodes.
CSS Tab displays the stylesheets loaded at the point in time.
DOM Tab displays all the page objects and properties.
In all the three tabs given above you can not only view but also edit code and see the result as you work. Firebug gives you the option to visually select a particular object or the whole window. To select a particular object click “Inspect” button and take the cursor to the particular object. The selected objects related HTML/CSS code, DOM attribute and Javascript code are available for inspection, you can not only check values but also modify them. The changes will be rendered immediately, so you don’t have to waste time saving and reloading. However, the changes will not be permanent but of course you can save them as local files and update the live site after you have finished. This can help greatly in instances of looking for error or other information in CSS. You can also add new key value pairs or disable elents and objects on the fly.
The Script tab allows you to debug Javascript in the same manner as you would in a desktop application.Use profiler to see the list of Javascript functions called and the time taken to execute each.To add a breakpoint,all you need to do is click on the line where you want to break the flow. To make it conditional,right-click on the line and add your condition expression. In the right pane you can add breakpoints to evaluate/analyze the execution, step in, step over or step out of the application process. Similarly, you can “watch” values of variables in the right pane by selecting the corresponding object.
Finally, Firebug can be a handy tool to analyze AJAX applications. Since AJAX makes asynchronous calls,inspection of request and response on the fly is not possible but with Firebug you can observe each request and inspect data that is being sent or recieved. Selecting the Net tab will allow you to access and inspect data of all loaded files including Html,CSS, Javascript,images and flash files. To levarage Firebug’s support for AJAX, click on the Net tab and from the options click on XHR (which stands for XMLHttpRequest).This allows you to not only view the data sent or recieved during an AJAX call, it also helps you test each and every call (GET as well as POST) and the time taken to complete it, which can help you diagnose performance related problems. If you click on the request call, Firebug displays data in three tabs (four in case of POST), the first tab show the Header information (both request and response), the second tab (Response) displays the actual data recieved from the server, the Post tab displays the data sent to the server using the POST method and the Param tab displays the key/values of the request URL.
This was a basic overview of Firebug aiming to help you get started if you have not already. Once you have started using it, you will find that this tiny add-on has all the functionalities that you would ever need to help you develop or test your web application.