Introduction

If you are not aware of Firebug, you are missing a great web development tool. Firebug is an add-on for Firefox, which sits inside the browser and provides many tools to assist in web development. You can watch the document or HTML structure, the CSS styles applied to elements, debug JavaScript, and much more.

First of all install Firebug from its website http://getfirebug.com/. After installation it is ready to use in web pages. You can activate it by pressing F12 or by clicking a bug icon in the status bar.

Firebug has six buttons on the toolbar whose names and functions are described below.

• Console: It shows the errors in your JavaScript in the form of friendly error messages with line numbers. Along with errors it also displays the AJAX requests. You can see the data sent with an AJAX request, request and response headers, and the response from the AJAX request itself.

  You can also log your own variables in console. console.log() can be used to log data in the console.

  Var x = 10;
  console.log('Value of x is: ' + x);
  

  This code in your script will display the following in the Firebug console:

  Value of x is 10

  This is a great replacement for the ugly alert boxes, which developers use frequently to check the value of variables and so on.

• HTML: This panel shows the document structure and HTML of a page. On the right-hand side it shows the CSS styles for the selected element.

• CSS: It lists all the CSS files available to a web page. After selecting this panel, you can select the desired file from a drop down and edit it.

• Script: It lists all the JavaScript files used in the web page. You can select a file, put breakpoints on specific lines, and can watch variables.

• DOM: It lists all the DOM objects and functions. Firebug displays their values in a formatted manner. You can also edit the values of variables from here.

• Net: This panel shows all the resources or files that the page has loaded. Firebug displays the size of each file and a progress bar, which tracks how much time each file is taking to load. Using these metrics you can optimize the page performance. You can also monitor network activity by resource type. The Net panel has further options that allow you to group HTML, CSS, JavaScript, AJAX requests, and images together.