jQuery & Chrome - Finding Button Hooks

Question

Using Chrome's developer tools I am trying to determine what jQuery function is hooking an input button on the page for debugging purposes. I usually just keep searching until I find it, but I figured I'd ask this time.

Is there a way to find a jQuery button hook for a specific button in Chrome? I've tried looking through the Event Listener Breakpoints, but can never seem to find the right thing to pause it.

Basically, I need to know what jQuery / Javascript is being executed after the button is clicked.

The hooks are implemented in the application like so:

$('.button_class').click(function (){
$('#button_id').click(function(){
etc...

possible duplicate of [Inspect an element to investigate jQuery event bindings](http://stackoverflow.com/questions/3960709/inspect-an-element-to-investigate-jquery-event-bindings) — Simon Keep, Jun 11 '12 at 08:52

score 2 · Answer 1 · answered Mar 13 '12 at 15:35

2

try this :

$(yourbutton).data('events');

answered Mar 13 '12 at 15:35

Alytrem

2,620
1
12
13

Thanks, this doesn't get entirely what I need, but it is interesting to know. This appears to simply tell me what listeners are hooked, but doesn't pin point the function by file or line. – teynon Mar 13 '12 at 16:12
Just as a sidenote: As of jQuery 1.8+ this method will return undefined. Instead, you should use $._data(element, "events") – Nullius Sep 25 '13 at 09:08
http://stackoverflow.com/questions/2518421/jquery-find-events-handlers-registered-with-an-object – Nullius Sep 25 '13 at 09:21

score 1 · Accepted Answer · answered Mar 13 '12 at 15:35

1

Depending on the number of events/timers on the page this doesn't always work. But you can try "pausing" before clicking the button you want to debug in the JavaScript debug window. That way the debugger will pause on the next line that executes. The thing that occasionally prevents you from using that is if there is a "hover" or mouse move/in/out event tied on an element you have to pass over to get to the button (including the button itself). In that case I just remove those events (if I can) until I get the one I want. The event listener breakpoints would be more ideal but they're sometimes difficult when using jQuery or another library, I've actually put in a feature request to the Chrome Dev Tools team to address this very issue. (allowing you to specify what files are "yours" and only "breaking" in those specific files)

good luck -ck

answered Mar 13 '12 at 15:35

ckozl

6,751
3
33
50

1

Thanks, the pause before works. Have to be careful how I do it though. Moving the mouse will also pause the page for me, so I have to focus on the chrome dev tools window (I pop it out) and then move the mouse into position, press F8, then click the button. It's not entirely ideal though, because it goes straight to the jquery file. It would be nice if they add that feature in the Chrome Dev Tools. It would make my life a bit easier if I could just tell it to not watch files in the jQuery file. (Those 3 lines mean nothing to me.) – teynon Mar 13 '12 at 16:15
@Tom Yeah, those are my sentiments exactly. Libraries decrease the utility of the "DOM event breakpoints" (which I think are awesome in their own right) you should spam Paul Irish about that feature if you want it... – ckozl Mar 13 '12 at 16:34
@ckozl - Did you get any feedback from the team? If not, could you provide the link to your feature request. This is a must-have because at the moment the event listener breakpoints are useless when using an extensive library like jQuery. – Nullius Sep 25 '13 at 09:11

jQuery & Chrome - Finding Button Hooks

2 Answers2