Tutorial

In this tutorial, we will learn how to use the Firebug plug-in for Firefox to help debug JavaScript errors. Using Firebug in the course is optional, but it may help your programming if you spend a few minutes to learn how to use it.

Preparation

1. First, you need to install Firebug. Follow the previous link and click on the orange Install Firebug 1.4 button and follow the directions.
2. Once installation is complete, you need to click on the little bug icon in the bottom left corner.
3. This will bring up a window, covering the bottom half of the screen.

   

4. To enable Firebug, click on the console tab.
5. Check the two boxes labeled Console and Script. Then, click on the button labeled: "Enable selected panels for Local Files". This will let Firebug check your Javascript for errors, and show you where they happen.

   

How to use Firebug

1. Save this page to your hard drive, so that you can edit the page. Open up your local copy of the page using FireFox.
2. In the bottom right, where the Firebug icon lives, there should show up red text, saying there is an error on the page.

   

3. Click on it. It should bring up the Firebug window again, but this time, it will have javascript in it.

   

4. Click on the green text, and it will highlight the code that is causing the error. Sometimes it will not be that exact line, but a line or two before the suspect line.

   

5. Open up this file in a text editor of your choice, and fix the error. Refresh this file, and see if the error has gone away.
6. If it has, we will move on to another basic, but very powerful feature of Firebug: variables and stepping through code.

Stepping through code

1. Open up the script by clicking on the script tab. Go to line 12. Click on the number, and this will put a red dot beside it. This is called a breakpoint. It is a point where the Javascript interpreter stops, letting us see what happens after the breakpoint.

   

2. Refresh the page.
3. Now, on the right-hand side of the Firebug window, will appear a whole lot of text. What we want to do is see what happens with two variables, letter, and num. You need to see what happens to the variables as each line of code executes.

   

4. So, we create a new "watch expression" so that we can see what happens to these two variables. Click on the New Watch Expression label and you can type in an expression. In this case, we just want to type 'letter' and 'num', but without the quotation marks.

   

   

5. Now, we want to step through each line of code as it happens. You should see a set of four arrow-type icons become active, and you can click on them.

   

   The blue arrow will execute the rest of the code until you hit another breakpoint. The next arrow will go through each and every line of code, including the code inside functions. The third arrow will skip over the current line, and if that line is a function call or block, will execute the function or block without showing every step of the way. The final arrow will exit out of any functions or blocks you are within.
6. The only two we care about are the first and second arrows right now.
7. Click the second arrow. See what happens to the two watched variables with each press of the button. If you have any questions about what is happening, ask either Ramon or your TA.