JavaScript Debugging Techniques with Firebug

Understanding JavaScript errors

When working with JavaScript, there are three main types of errors you will encounter:

Syntax errors
Runtime errors
Logic errors

Syntax errors refer to simple errors in code – for example, missing a parenthesis in an if statement for if variable==value) – which will trigger an error in the JavaScript interpreter.

Runtime errors are those that are valid JavaScript code, but fail for some reason based on the context or what they do. These include, for example, referring to a variable that does not exist or is not visible within the current scope, or working with one data type as if it is another.

Finally, logic errors, the hardest to identify, refer to mistakes in the code – for example, making a particular comparison when you actually want to be making another. These are most commonly found in the complaint “my code does one thing when it should do another entirely”. If you find yourself in this situation, you probably have a logic error. Advanced debugging techniques make identifying logic errors very easy.

General debugging

For general debugging, there are a number of simple strategies that can help you easily identify errors and construct code that is more error-proof.

Isolate issues

Commenting out large chunks of code can help isolate the problem. You can use either comment blocks (/* and */), or wrap an if (0) { … } around your code. The problem with comment blocks is if you try to comment out a block of code with a comment block in it. An if (0) will remove code in a JavaScript-valid manner to make sure it is never executed.

Google it

If you are attempting to achieve a particular complex task in JavaScript, and have trouble with your approach, try googling the issues. Chances are someone has done what you are attempting before, and has documented common problems and solutions somewhere on the web. They may even provide code that serves the purpose.

console.log()

Both Firefox and Safari (and many other browsers) provide a JavaScript console to which you can log data. Instead of alert popup boxes and writing variable values directly to the document, try calling console.log() with your debug data. This allows you to record information as your script executes and identify the issue. If you need this to work on Internet Explorer or other browsers, try Firebug Lite.

JavaScript debugging tools

If you want to debug JavaScript, first you’ll need the right tools. Firefox is pretty much assumed here, and make sure you have the Firebug extension installed. Internet Explorer tends to “soft fail”, or silently fail, giving you a blank page without reporting the actual error. Firefox and Firebug togther give you serious web development power, from debugging JavaScript to inspecting the DOM, modifying code at runtimeand testing JS expressions. You’ll also want a general editor with syntax highlighting – if you develop on Windows, I recommend Notepad2.

Finally you should bookmark JSLint, and run your code through it reuglarly. JSLint will scan your code for errors (syntax and runtime, though not logic). It also helps you identify bad practices which can cause runtime and logic errors.

Introduction to Firebug

Firebug is the most useful tool you will ever use for JavaScript debugging. It integrates perfectly into Firefox, replacing your standard JavaScript error console and providing a number of JavaScript debugging features. Here’s a quick overview.

To begin, install the Firebug extension in Firefox and restart your browser. A tick icon or a gray circle will appear in the bottom right of your page. Right click it and make sure Firebug is enabled (usually unticking both “disable firebug” options does the trick). You should see the following:

This is the main Firebug console, a central area to work with the page. In the middle is the actual console, which will report errors and the results of your statements. Up the top in the second row are the various tabs, each providing different JavaScript functionality.

At the very top is the main menu; you will probably only use the “Inspect” button from here (you may not have a “Profile” button available). Inspecting will allow you to select individual HTML DOM nodes, view information about them, alter their attributes and CSS etc.

Finally, at the very bottom (the line with the >>>) is your interface to the JavaScript interpreter. You can run JavaScript commands here, and they will be executed within the context of the current page. If you need more space, click the up arrow at the end of the line to open up a multiline input. If you try and paste multiple lines of JavaScript, this will open automatically. You can then call functions, check the values of variables etc.

Debugging syntax errors

Let’s take the following example:

var status = 25:
var port = 80 host = "google.com";

function Connect(status, port, host) {
    // do some ajax

    this.host = host;

    this.do_something = function(host) {
        if (port == 60) {
            alert("Good, port 80 - standard http");
        } else {
            alert("Bad, something nonstandard");
            alert("this.host is " + this.host);
        }
    }
}

var connection = new Connect(status, port, host);
connection.do_something(host);

Pretty standard JavaScript code. You can probably see a few errors already. Save it in an HTML file (wrap it in <html><body><script>) and load it up in Firefox. Check your Firebug icon in the bottom right – it will complain of a JavaScript syntax error:

missing ; before statement
var status = 25:n

Clearly here the issue is a missing semicolon, but the error has been triggered by the colon being in the wrong place. JavaScript thinks you want a seperate statement with the colon, and that before you do that you have to finish the previous statement (our variable declaration). Here, the developer clearly just wants to finish the statement, and so we change the colon to a semicolon and move on.

If we now save the file again and load it up in Firefox once more, we see the following error:

missing ; before statement
var port = 80 host = “google.com”;n

Now the error JavaScript has found is valid – host = "google.com" is a seperate statement (or can be, at least). Clearly here we are missing the comma or the semicolon, either of which will complete the previous statement – port = 80 - so that we can declare our host variable. We add this comma after port = 80 and continue.

Debugging runtime errors

Here’s the current version of our script, with our syntax errors debugged and removed.

<html>
<body>
<script>
var status = 25;
var port = 80, host = "google.com";

function Connect(status, host) {
    // do some ajax

    this.do_something = function(host, port) {
        if (port == 60) {
            alert("Good, port 80 - standard http");
        } else {
            alert("Bad, something nonstandard");
            alert("this.host is " + this.host);
        }
    }
}

var connection = new Connect(status, host);
connection.do_something(host);
</script>
</body>
</html>

Save this in a HTML file and open it up with Firefox. Have a brief look at the code – we clearly want the port variable to be 80. We popup with a “good” alert if this is true. However, when we run this code, we get the two “bad” popups, one of which says “this.host is undefined”.

This is a runtime error, because the code is still perfectly valid JavaScript, but we have not defined this.host within the current scope, and so it evaluates to “undefined” (which is an actual data value in JavaScript). We can correct this easily by adding the line this.host = host; right after // do some ajax. If we refresh the page, the second (bad) alert box now says “this.host is google.com”. We have corrected our runtime error.

Debugging logic errors

We now have the following code:

<html>
<body>
<script>
var status = 25;
var port = 80, host = "google.com";

function Connect(status, host) {
    // do some ajax

    this.do_something = function(host, port) {
        if (port == 60) {
            alert("Good, port 80 - standard http");
        } else {
            alert("Bad, something nonstandard");
            alert("this.host is " + this.host);
        }
    }
}

var connection = new Connect(status, host);
connection.do_something(host);
</script>
</body>
</html>

There are no errors caused, but we are still seeing the wrong set of alert boxes. This is most likely a logic error, because the code is doing something when it should be doing something else, and it is doing this at the if (port == 60) condition. We could put in an alert or some other debug code to show us the value of the pot variable, or we could use Firebug.

Open up Firebug and move to the “Script” tab. Find the line with the if (port == 60) on it, and click once in the beige margin at the left end of the line, to the left of the line number.

This will create a red dot, representing a breakpoint, in the margin on that same line. Now, refresh the page and the line will be highlighted in yellow, with an arrow on top of the red breakpoint dot. Hover your mouse over the “port”. You should see the following:

Here, the JavaScript interpreter has paused at our breakpoint. We can choose to allow it to continue by clicking the blue arrow at the top. For now, however, we can inspect the value of any variable or expression in the current scope. Here, by hovering over port, it shows us that port is set to 80, as it should be. This is contrasted with our condition, checking if it is set to 60.

Clearly this is a logic error, and can be corrected by changing the 60 to 80 in the condition. We make this change, remove our breakpoint by clicking on it once again (click on the red dot and it will disappear momentarily), refresh the page, and the correct alert box (“Good, port 80…”) appears.

This particular logic error could have been corrected on sight, however debugging more complex issues (especially where you compare one variable to another variable) is greatly simplified when using Firebug. To check the value of other expressions, we can use the watches, which “watch” the value of a variable so that we can see it at a glance at each breakpoint.