Can't find variable declaration in big set of included js files

Question

There are many *.js files included to the page template on my website. Some global javascript variable declaration (redeclaration) in one of that files results in conflict with other javascript code. Because there are many files on the site it's hard to find place in code where that variable is declared (variable name is 'name' and very many files shown in search results). Are there any javascript code debuggers which can show where in the code (js file name) declared specific variable?

Answer 1

Run your code through JsLint http://www.jslint.com/lint.html. Check all the checkboxes, except "stop on first error", "safe subset" and "adsafe", since you only want to find out what the global variables are.

You can make a variable private by enclosing your code inside a closure like this

(function(){
    var yourPrivateVariable = 0;
    window.yourGlobalVariable = 0;        
}());

Answer 2

If you don't just search for the variable name but extend the search to look for name = you should at least narrow your search to only get declarations/re-declarations of that variable, not matching every place that variable is being used.

Two side notes

1. To avoid this kind of mess in the future, your JavaScript should really avoid using global variables like that. Try to namespace your variables, so that you avoid such conflicts. Read this SO question on how to.

2. You should try to minimize all your JavaScript-files into one file, to avoid unnecessary HTTP-requests. During the minimization-process you would also most likely get warnings about this kind of variable-conflicts.