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.