Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Inspect an element to investigate jQuery event bindings

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.

like image 752
jMyles Avatar asked Oct 18 '10 15:10

jMyles


People also ask

How do you find the events of an element?

right click on the target element -> select " Inspect element " Scroll down on the right side of the dev frame, at the bottom is ' event listeners '. Expand the tree to see what events are attached to the element.

How do I get JavaScript inspect element?

Open Chrome and navigate to the web page containing the JavaScript you want to view. Right-click an empty area on the web page and select Inspect in the pop-up menu to open the Chrome developer tools.


2 Answers

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>

like image 57
gnarf Avatar answered Sep 24 '22 02:09

gnarf


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

like image 39
Nick Craver Avatar answered Sep 26 '22 02:09

Nick Craver