Blog, Steven Roussey, Blog!: Debugging Closures

When you ask a web developer what browser they use most often when developing, you will likely here Firefox followed by Chrome these days. When it comes to debugging closures, a common thing when using module design patterns in JavaScript, those two browsers really bite.

In particular, Firefox 3.6 is really really bad. The older Firefox 3.5 and the current Chrome are just kinda bad. You would have to go back to Firefox 3.0 or switch browsers altogether to get something that is developer friendly on this particular topic (and note, I am just speaking to this topic when I say that, I'm a developer of Firebug for Firefox after all).

Let us take a simple example:

<!DOCTYPE html>
<html>
<head>
<title>Test Case Closures</title>
<script type="text/javascript">
// Similar to firebug test case for issue 2871
function obj()
{
    var _this = this;
    var www = 'asdasd';
    var www2 = 'correct';
    this.ttt = 'asd';
    this.closure = function()
    {
        var w = www;
        var t = _this.ttt;
        rrr = 5;
    }
    setInterval(this.closure, 2000);
}
function init()
{
    var a = new obj();
}
</script>
</head>
<body onload="init()"></body>
</html>

Let us assume that the closure function has an error -- that w is getting the wrong value. Should it be set to www or www2? What are the values of each? Let's look in Firefox 3.6 with Firebug and set a breakpoint on line 16:

Ick. Let's try it with Chrome:

From the two example above, you can see that some closure variables get "Reference Errors" as if they were not defined. If you used them in the closure function, the values would get set, they are really there after all.

Now both of these browsers totally ignore the www2 variable. No www2 for you! Firefox 3.6 will not even let you see the value of www even though w gets set correctly! Obviously this is not the way to help web developers debug their applications.

For reference, Firefox 3.0 would let you see both variables (www and www2). So does IE8. And IE9. And Safari 5. And Opera.

The thing I find most odd about all this is how people at Mozilla and Google would not notice this. Particularly Google, since they are a big creator of JavaScript content applications on the web. If anyone is listening, give us our www2!

Blog, Steven Roussey, Blog!

Tags

Archives

Debugging Closures