46

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 buttons.js:

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

Now, let's say I have a big HTML page with a whole bunch of .js files included. I can click on the button and see the llama appear, but I have no idea where the code above is.

The solution I am looking for is very similar to that which is available with CSS in Firebug. I want to inspect the element and have it show me that this jQuery occurs in Line 76 of buttons.js, along with any other bindings on this element.

*Note: The bounty is for a specific answer to the 'llama question,' ie pointing to a the solution that is described above. *

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

Improve this question
2
  • A complete example would go a long ways to clarifying the question, esp. since the "event binding for this element" isn't a standard terminology. I think you mean "where is element.addEventListener() called? Commented Oct 25, 2010 at 0:59
  • I hope the specifics that I have just added make my question clearer. Thanks for the advice. Commented Oct 25, 2010 at 4:35

4 Answers 4

Reset to default
100
+50

Using Firebug, FireQuery and this fiddle:

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

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

Screenshot 2

And clicking on the function() reveals this:
Screenshot 3

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:

alt text

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:
Screenshot

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

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>

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Awesome. The single best answer I have ever seen on StackOverflow. You win.
I didn't know you could use and define named functions in a handler. Thanks!
In chrome now you can right click on function() found above and it will offer you the option 'show function definition' which will show you the function in the source file.
@ChristopherWill - Nowadays, $( elem ).data( "events" ) is a deprecated method for getting the event handlers. It's easier to look on jQuery._data( elem ) which is where jQuery stores it's 'internal' data, the $.fn.data method is no longer where events are stored.
Thanks for this solution! I had to use $($0).data('events') even though it's deprecated because the other options didn't work.
|
4

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).

Improve this answer

13 Comments

Beautiful addon! Let me just add that Firebugs ability to set breakpoints in JS code helps a lot debugging these sort of things.
Yes, FireQuery is great and already in my toolbox. However, it doesn't seem to answer the llama question. Or does it and I'm not seeing it?
@Justin - You can see the event on #bigButton and view it's handler code...but you're not going to be able to see where it was bound most times, since that can vary quite a bit. Or alternatively, go to the console: $("#bigButton").data("events") to see all handlers, the console interface makes it pretty easy to navigate the object.
@Nick Craver: That's what I suspected. Which brings me to my last point: Weren't we better off (at least in this aspect) with the onClick attribute?
@Justin - There could be 20 handlers, bound in 20 places, bound, rebound unbound, maybe bound to a parent off a bubble, what if it's variable based, what if it's .live() with no click handler at all? Is it a user triggered event or simulated? There are tons of variables here, you have to remember that JavaScript engines trace code to make it much faster, not easier to debug...the browser wants to bind the event handlers as fast as possible to beat the other guy, not make the events easier to trace, which is inherently heavier.
|
0

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:

jQuery data in Firebug HTML view

console:

jQuery data in Firebug console

Improve this answer

5 Comments

Of course, thanks to the wonders of event bubbling, clicking on button can activate an event handler on any parent element. If there are many of those, Firebug's profiling is your friend.
But FireQuery doesn't allow me to directly answer the llama question, right? I don't see where in FireQuery I am able to inspect an element and see what events are bound to it.
@Justin Myles Holmes: In the HTML view, it will show what data is bound to each node; you can just check the object bound as "events" in the DOM view and look at its handler property. The console also shows if there is data associated to a logged jQuery object, with the small envelope(?) icon before the closing bracket. See the images I added to my answer.
I see the "events=Object{ click = }" - but I need to know exactly what comes after the =. How can I find the place in the .js file where the click event is defined?
@Justin Myles Holmes: just click on the "events=" box to inspect it.
0

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.

Improve this answer

4 Comments

I have looked at eventbug and it seems to just take me to the same information presented in the DOM tab. It doesn't seem to answer the llama question. If I'm wrong, please let me know. I really appreciate the suggestion. :-)
Ok: You're wrong! Actually there is no way to tell if you're wrong or not because you have not posted a test case. So I can't help you.
What can I add to my question for it to qualify as a "test case"?
some HTML and the script tag(s) for jQuery. What is bigButton and theLlama?

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.