Debug JavaScript with Firebug

Writing JavaScript is easy, but debugging is not due to the very limited debugging functionalities provided by the JavaScript language itself. One of such limitations is that there's no effective way to display debugging message other than embedding a bunch alert boxes or a million lines of document.write in the JavaScript code. Fortunately, external debuggers can more or less help developers to overcome these limitations and make debugging more pleasant.

Preparation

As promised in the title, I am going to show you how to debug JavaScript using Firebug -- the coolest web browser debugger on the net. Firebug's JavaScript debugger allows you to set breakpoint, step through the code, and inspect variables as it step through it. Firebug is a Firefox extension, which means you will need to have Firefox installed somewhere. Install Firefox if you haven't done so, and install Firebug extension from Firefox's official site.

If you see a green check button at the bottom-right corner of your Firebox browser window, that means you have successfully installed Firebug.

Firebug Button

Start debugging

We will use two file for this purpose: test.html and test.js. Test.html contains a link reference to test.js, and test.js contains the actual JavaScript we are going to debug. For your convenience, I put them into a zip file.

test.html

test.js

Nothing fancy about test.js. It provides an implementation of the Stack, which included some methods of a stack such as push and pop. The Stack object has a helper function called toString, which returns a list elements in the stack. For instance, suppose we have these values in the stack, 1, 2, 3, 4, toString will returns a formatted string like this: [ 1, 2, 3, 4 ].

Open test.html from Firefox, you should see a pop up alert box similar to this one:

Alert Stack

Obviously something is wrong because the string "undefined" shouldn't be there. In test.js, we pushed values 1 through 5 to the stack, so we expect toString returning [ 1, 2, 3, 4, 5 ]. Let's use Firebug to debug this code and see what's going on.

Debug by Setting Breakpoints

Since toString method of the Stack did not produce the right result, naturally, it becomes the target function of our debugging. To start:



  • Toggle Firebug debug panel by click on the green check button.
  • Switch to Script tab.
  • Scroll down to line 22 and set a breakpoint at line 22 by click on the left sidebar as shown below.
  • Reload the page.

The execution stopped at line 22. At this point, you can gather many valuable information to debug your script. Instead of using the old fashion alert pop up or document.write, you can now inspect the value of each variable by hovering your mouse pointer over it. As you are doing it, a tooltip will pop up and display the content of that variable. Easy, isn't it?

Firebug Debug Panel

Since this code block (the code in toString function) hasn't been executed yet, when you move your mouse pointer over those variables, you will see null or 0 for object and numeric data type respectively as you inspecting them.

Step through the Code

Click on the button says "Step Over" to execute the code line by line:

Step Buttons

As you step through the code, all variables in this code block is being updated and displayed on the right side of the debug window. Watch these values closely because from them, you can often spot the root cause for the bug you are debugging, .

Continue stepping through the code, you will enter a loop and you will see how the variable temp is being built incrementally. At sixth iteration of the loop, the variable temp holds something that is not indented: "[ 1, 2, 3, 4, 5undefined", which means something has gone wrong during that iteration. By examining the code block, we know the string that was being added to the variable temp came from this.list[i];, which is any Array object. At this point, we can presume that the index of array is out of bound at sixth iteration.

To verify this, expand this node and then list node from variable inspection window. As you can see from the figure below, the indices of list range from 0 to 4, but the provided index i is 5.

Expand list

To fix this script is easy, all you need to do is change the condition of the loop from i <= length; to i < length. However, this is not the point of this article. The point is to show you what Firebug can do for you in terms of JavaScript debugging: it has the ability to shows you line-by-line how the code is being executed; In addition to that, it allows you to inspect the value of every single variable during the execution. Imagine that how would you do the equivalent debugging using alert function, especially for code that consists of thousands of lines.

Alternative Way for Setting Breakpoints

Besides setting breakpoints by using Firebug's code browser, you can set breakpoint by adding debugger; anywhere inside of your JavaScript code. By adding this line of code, you can effectively pause your JavaScript code as we did in the previous step. You might find one way is more convenient than the other.

Using Console for Writing Output

Alert message box is not a great way to display script output since it pauses the script execution and requires user (the programmer) to click to resume the execution. Firebug offers a built-in JavaScript object that provides a separate channel for data outputting. For example, if you want to write something to console window instead of browser window, you can call functions of the console in the following way:

Now, you can replace the last line of test.js to

Find out more at Firebug logging functions.

Conclusion

The features I have covered here are only a tiny tip of what Firebug has offered. There are many exciting features such as in page inspecting of HTML element, change CSS styles on the fly, DOM element inspection and many other more which can be found from Firebug's official web site.

Files

Firebug Debugging Sample Files

Links

12 Comments Debug JavaScript with Firebug

  1. Tim

    Very useful tutorial. Thanks. For such a popular tool, I haven\'t found many step by step guides like this. You\'ve helped me solve a problem with my code that was really bugging me, if you\'ll excuse the pun.

  2. chandru

    Really superb site. Cool explanation. Got Exited after seen its working for me and at the real time i debugged java script and amazed about the tool FireBug as well as Java Script.

    Thanks a lot.

    Keep Posting....

  3. scott

    short and to the point. just what I needed to get started on a more serious use of firebug. thank you.

  4. Pingback: Expertaya » Blog Archive » Javascript Environment Tips

  5. yi fu

    Thanks for this guide, it is very useful, just one question, Could I update my js file directly in firebug? or I have to open it in editor?

  6. Pingback: debuggen mit Firebug funktioniert nicht - html.de Forum - HTML f?r Anf?nger & Fortgeschrittene

  7. Pingback: Street Fighter 4 PC Version | PC Fighting Games

  8. IMI Comp

    AAaaaarrrrrgggghhhh....!!!
    So it's so darn easy, why...oh...why....???!!!

    hehehehehe...! ANW, THX a-gazzilion Bro...
    You're 'da Man...!

    PS: don't forget to hang by my blog, 'kay...?

  9. Benny Blanco from The Bronx

    Excelent work !!! I have to congratulate for this ver cool web site...Very explicit and easy to follow it through.... Thanks for your great work !!!!

  10. Pingback: Debug using Firebug « hugomonteiro.net

Comments are closed.