How to generally find out what javascript controls the behavior of a general element on a webpage?

Question

Look at this fiddle http://jsfiddle.net/52VtD/2635/

Inside it you can see one tooltip working.

Suppose we weren't looking at a fiddle though, and couldn't see the javascript source, but we wanted to know what was controlling this tooltip behavior?

The answer is

$("#tooltip1").tooltip();

So how do we find that answer using chrome or firefox inspector, or some other debug/browser inspector stuff? Preferably it would be quick, as opposed to downloading all .js files and prettifying them in an IDE and then manually searching.

Answer 1

There is no quick answer to this. You pretty much have to analyze a specific situation and see what clues you can then go look for.

In this particular case, you're going to suspect that there's an event listener attached to the #tooltip object. You can first look in the Chrome debugger for event listeners. Right click on the button, select Inspect Element, click on the Event Listeners tab and then look at the event listeners. In this particular case, you will see a bunch of them for that object. What you want is mouseout and mouseover. But, when you see where the event listeners are attached, it just take you to the internals of jQuery. This is a challenge with a library because it's the library that actually attached the event as part of some higher level API that the developer used.

So, now you know that jQuery was used to attach these events. You need to figure out where in the code these events where attached. To do this, you need to develop a theory about how the developer identified this particular object in jQuery. Since there is no particular structure to this simple document, the likely way that the developer found this particular object is with a "#tooltip" selector passed to some jQuery function. So, at this point, I would search all the JS in the page for "#tooltip" and see what you find.

While still in the Chrome debugger, you can hit Ctrl+F and enter #tooltip. Then, hit enter several times as it takes you to different uses of that and the third time, it will take you to:

$("#tooltip1").tooltip();

And, you will have your answer. Obviously, every problem like this is a bit different and it takes some detective work and searching to figure out what clues to search for in the Javascript. Some cases are much harder than others.

Answer 2

In *Chrome** you can bring up the developer tools buy clicking f12 and on the right you should see a tab titled "Event Listeners". Here you should see the event listeners for the page your are on.

This should have all the Event Listener info you could ever want :)