Inspect jQuery event bindings element

Question

Hypothetical: I find a page with a button ('#bigButton') that, when clicked, calls llama ('img # theLlama') to show () using jQuery.

So, somewhere (e.g. line 76) in buttons.js:

$('#bigButton').click(function(){ $('img#theLlama').show(); }) 

Now, let's say I have a large HTML page with all the .js file association. I can click on the button and see the llama, but I have no idea where the code above is.

The solution I'm looking for is very similar to what is available with CSS in Firebug. I want to check an element and show it that this jQuery appears on line 76 of the .js buttons along with any other bindings to this element.

* Note: generosity is intended for a specific answer to the question of "llama", i.e. pointing to the solution described above. *

FireQuery is a great tool for many jQuery tasks, but it doesn't seem to answer the llama question. If I am wrong about this, please correct me.

Answer 1

Using Firebug , FireQuery and this fiddle :

Hitting Cmd + Shift + C (Inspect Element) and pressing a button shows this:

Clicking on Object {click= } events shows this (after expanding some information)

And clicking on function() shows this:

What should be the code you are looking for, right?

As a side note, Firebug cannot always find the exact line of code from which something came from. This method did not work for me completely! Another approach is to use the named functional expressions. Change code to:

 $('#bigButton').click(function showMyLlama(){ $('img#theLlama').show(); }) 

Now it shows when checking the events object:

This is more useful than just function() , since it is now obvious that this handler shows us the llama. You can also find the code for the function name and find it!

---

Using Chrome , its built-in web inspector and this fiddle :

Hitting Cmd + Shift + C (Inspect Element) and clicking on the button shows this:

After clicking the button in the item inspector, press "Escape" to open the JS console:

In the Chrome console, $0 refers to the selected item in the toolbox.

Entering $._data( $0 ) will give us a jQuery data object (internal), which includes events, as, for example, in our Firebug example, unfortunately, Chrome will not allow us to click on a function, but it will allow us to see the source:

<Broken Screenshot link>

---

Note on .live() events:

Live Events are stored on $._data( document, "events" ) and contain an origHandler that points to a function:

<Broken Screenshot link>

Answer 2

Given the interface you need, I think you will need FireQuery: http://firequery.binaryage.com/

This is a Firebug addon specifically for such areas (a special jQuery addon that is strong in data / events).

Answer 3

FireQuery is the most convenient, but if you need to do it manually, you can get a link to the click processing function using $(element).data('events').click[0].handler (of course, this is not necessarily 0 if there are several click handlers). From there, your favorite debugger should find this feature in the code. (Using these functions helps. Firebug can sometimes find anonymous functions, but most often not. It will show the body of the function, though if you hover over it.)

Refresh since data is displayed using FireQuery:

HTML view:

Prefixes:

Answer 4

Well eventbug will show you all the event handlers for the item, http://getfirebug.com/releases/eventbug but often the handler is some common code.