How do I find where a variable is defined at runtime?

Question

I've been using jQuery and YUI side-by-side with no issues until recently. Occasionally, inside of a callback for, say, a YUI button, $ will be shadowed by some other function (click for big version):

and for the life of me, I cannot figure out why this is happening. Yes, I know I could be safe and use jQuery or window.$ everywhere instead of just $, but that's just a workaround and not an actual fix.

At runtime, how can I find where this $ impostor is coming from? - e.g. find where it's declared, and why it's in my bleedin' scope.

---

It turns out that this behavior is easily reproduced (at least in Chrome and Firefox 4) right here on Stack Overflow, since SO uses jQuery (again, click for full size):

I can only infer that $ as

function () {
    return document.getElementById.apply(document, arguments)
}

must be from the console itself!

Found it.

with strikes again.

Chromium bug for this: http://code.google.com/p/chromium/issues/detail?id=70969

Answer 1

I'm betting this doesn't happen in IE? This is the only hint I could find:

http://davidwalsh.name/dollar-functions

http://dam5s.tumblr.com/post/3079779011/bug-in-chromes-javascript-console

Some sort of bug in Chrome/Firefox/Safari.

Answer 2

Here's something to try. Firebug's debugger shows you all the variables that are available at a scope, in your example, it's obviously not local scope, and it's also not global since you already tested window.$. Therefore, it's has(?) to be a closure variable (which should be in the same file).

The attached screenshot shows the closure scopes that are available

The example shows that data is available within $.each as a closure variable. Again, according to my theory, you should be able to find the culprit by looking for instances of $ on the page, since closures are lexically defined . Maybe there's a self calling function that passes in $ like jquery plugins.

Answer 3

Use a watch expression...

• Setup a function that checks if $ is correct, maybe jQueryCheck(), and alert if not correct.

  function jQueryCheck(){ if(!$.filter) alert('wtf'); }

• Add a breakpoint at some step before you expect a problem to occur in the code.

• Add a watch expression that runs jQueryCheck().

• Hit breakpoint and just keep clicking on next step. When the variable becomes invalid the alert will pop up and you will then be on the line after the change occurred.

Here is code I used to test

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script>
function invalid(){
    /* set breakpoint on loop below
        click invalid button
        add watch expression jQueryCheck()
        click nextstep repeatedly until wtf alert
    */
    for(var i=0; i<100; i++){
        if(i == 10)
            $ = 10;
    }
}
function valid(){
    $ = jQuery;
}
function jQueryCheck(){
    if(!$.filter)
        alert('wtf');
}
</script>

<input type="button" onclick="valid()" value="run valid">
<input type="button" onclick="invalid()" value="run invaid">

Answer 4

you could try using jquery.noConflict http://api.jquery.com/jQuery.noConflict