Have Firebug break when a global variable x is defined

StackOverflow https://stackoverflow.com/questions/1013346

Question

We have a very large JavaScript application, where after many months of coding there have inevitably sprung a couple scope slip ups where a variable is defined without using the var keyword in the following fashion:

function() {  
  x = 5; ...  
}

instead of:

function() {  
  var x = 5; ...  
}

This is happening somewhere - we're not sure where - and searching for the variable name in question is difficult, since it's a common word that appears 1000s of times in our source.

Is there a way to ask Firebug to break on the line that first creates a given global variable? To clarify, I would like to break at exactly the instant when window.x switches from undefined to a defined value, and to break statement.

I've tried creating a watch expression and hoped I could turn it into a breakpoint, but I can't seem to create watch expressions without some kind of context or scope.

If this isn't possible with Firebug, I'd be interested in anything that can accomplish this in Firefox in general.

Was it helpful?

Solution

Provided a few things

  1. You know the name of the variable
  2. You don't have a variable with that name in the global scope (declared outside functions), but only inside functions.
  3. There are calls to the function that declares the variable.

this little script would do the trick:

<script type="text/javascript">
window.__defineSetter__("x", function(value) { console.trace(); });
x = 1;
</script>

You'll get a trace of the executed code before that assignment.

It may fail to report some situations, so take a look at JSLint. Load all your JS files right there and lint them.

OTHER TIPS

Here's another solution that only works in Firefox because it uses the Firefox-specific watch method.

Put this piece of Javascript at the very top of your html page, just after the <head> tag:

<script>
window.watch('x', function() { debugger });
</script>

Note that watch works on any Javascript object (window is the global Javascript object).

Here's the solution I ended up using by modifying Ionut G. Stan's solution:

window.__defineSetter__("name", function(value) {
  if (value=="div") {
    debugger;
  }
});

I used debugger instead of console.trace(), so I could stop and look at it mid-execution. With console.trace() I got a bazillion trace statements due to this line executing many times.

The leaky scope turned out to be buried in Dojo, where Dojo is setting that variable to the name of a processed element.

View your web page on the SeaMonkey browser (I use version 1.1.16) and look at the error console, you will see a message of this type for each assignment to an undeclared variable :

Warning: assignment to undeclared variable x
Source File: http://....js
Line: ##

In addition to debugging, I would advise to check your code with JSLint, which reports unexpected assignments in the global scope as errors.

There are several command-line bundles of jslint, such as jslint4java which can be used cross-platform in Ant build scripts.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top