Debugging JavaScript in Firefox with Firebug

15
Apr/074

Debugging JavaScript in Firefox with Firebug

In this article I would like to cover some of the basics of using Firebug to debug JavaScript in Firefox. If you do not have Firefox or the latest version I suggest you download Firefox, install it then get the Firebug extension. There is simply no better solution for debugging JavaScript than Firefox and Firebug at least not from what I have seen.

If you want to debug JavaScript in Internet Explorer check out this post: Debug JavaScript in Internet Explorer

Firebug provides many features that help you write better code for your web sites from Inspecting HTML to debugging scripts. The latter being one of the most important additions to the web application programming arsenal to come along in a long time, especially in this day and age of web 2.0 and AJAX. If you are familiar with another IDE such as Visual Studio, debugging in Firebug will be very familiar. All of the tools you are used to, well all of the important ones anyway, are there.

If you have just installed Firebug it is likely disabled by default. Click on the Tools menu in Firefox then the Firebug menu and finally if Disable Firebug has a check next to it, click it to remove the check. Alternately, you can press F12 then click the Enable Firebug link.

So for this article we need just a simple html file with some JavaScript in order to go over the basics. Following is a block of html you can use or you can download the html file here.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Debug Example</title>
	<script language="javascript" type="text/javascript">
		function init(){
			var myDiv = document.createElement("div");
			var bodyNode = document.getElementsByTagName("body").item(0);;
			myDiv.style.backgroundColor = "#aaffaa";
			myDiv.style.width = "100px";
			myDiv.style.height = "100px";
			var divText = document.createTextNode("Hello World!");
			myDiv.appendChild(divText);
			bodyNode.appendChild(myDiv);
		}

	</script>
</head>
<body onload="init();">

</body>
</html>

Once you have the debug_example_script.html on your system, open it in Firefox. It should load with no errors and have the text “Hello World” in a green box. Now that the page is open, look on the right hand side of the Firefox status bar, you should see a green circle with a check mark in it. Click that circle to open Firebug. Firebug will open as a frame in your browser and, along the top of that frame, there will be a set of menu items/tabs, starting with Console. The fourth option should be Script. Click the Script tab to open the script debugger.

Now that you have the script debugger open you should see the code from the page on the left and the Watch pane on the right. The first thing we are going to do is set a break point so we can step into the code and inspect its variables and objects. To set a Break Point, click the gray area next to the line number on which you want the code to break. In this case we want to click the gray area to the left of line number 7.

Now that we have a break point set, we want to reload the page so that our code will execute. Hit the refresh button or F5 to reload the page. You will notice that the green box does not appear on the page, and that in the left pane of the Firebug frame there is a yellow arrow on our break point. This means that the execution of the script has paused on that line so we can inspect things. In the Watch pane you will see a few items that Firebug has automatically added for us. For now you can ignore those.

Now that we are actively debugging you can mouse over variables and objects in the code to see to what value they are set. Since we have stopped on the first line of our init() function most everything is undefined as we have not actually executed any of the code. To execute the current line of code and move to the next line (step over) you can press the yellow arrow that points down on the top right of Firebug or, press the F10 key.

After pressing the F10 key you will notice that the yellow arrow next to the line numbers has moved down to line 8. Now if you hover your mouse over myDiv you will get a popup that says “div”. So line 7 has executed and created a new div element and assigned it to the myDiv variable. If you look over in the Watch pane in Firebug you will notice that myDiv says “div” and has a plus sign next to it. Go ahead and click the plus sign, this will open a tree view of the myDiv object so you can inspect all of its members.

Ok, so lets make use of stepping through code to solve a problem. First, after line 14, add the following lines to your JavaScript:


	var aNum1 = "55a";
	var aNum2 = 10;
	var ar = aNum1 * aNum2;
	alert(ar);

We are going to pretend that we do not know why our alert keeps displaying NaN. So we are going to put a break point on line 14 and step through the code. Click the break point next to line 7 to remove it and click next to line 14 to add a break point there, then hit F5 (reload the page.) Next we press F10 to step over line 15 and 16 and stop when the yellow arrow is on line 17. Now we can look at aNum1 and aNum2 in the Watch pane, and it is easy to see that aNum1 is a string and aNum2 is a number.

That should give you a basic introduction to the Firebug debugger and how it can help you develop JavaScript more efficiently. There is a lot more that Firebug can do for you so make sure to explore the tool thouroughly.