Inspect an element to investigate jQuery event bindings

Question

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

So, somewhere (say, Line 76) in

Answer 1

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

Answer 2

Given the interface you're after, I think you'll want FireQuery: http://firequery.binaryage.com/

It's a Firebug addon specifically for areas like this (a jQuery specific addon, strong in data/events).

Answer 3

Using Firebug, FireQuery and this fiddle:

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

Clicking on the events Object {click= } reveals this (after expanding some info)

And clicking on the function() reveals this:

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

As a note, Firebug can't always find the exact line of code something came from. I've had this method fail completely! Another approach is to use named function expressions. Changing the code to:

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

Now reveals this when inspecting the events object:

Which is way more useful than just function() as it is now obvious that this handler shows us a llama. You can also now search 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:

Clicking on the button in the elements inspector then pressing Escape to open the JS Console:

In the Chrome Console, $0 refers to the selected element in the elements panel.

Typing in $._data( $0 ) will give us the jQuery (internal) data object which includes events, just like in our Firebug example, sadly, Chrome wont let us click on the function, but it will let us see the source:

<Broken Screenshot link>

---

A note about .live() events:

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

<Broken screenshot link>

Answer 4

FireQuery is the most convenient, but if you need to do it manually, you can get a reference to the click handling function with $(element).data('events').click[0].handler (of course it is not necessarily 0 if there are multiple click handlers). From there it is up to your favorite debugger to locate that function in the code. (Using named functions helps. Firebug can sometimes locate anonymous functions, but more often not. It will show the body of the function though, if you hover above it with the mouse.)

Update this is how data is shown with FireQuery:

HTML view:

console: