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

Answer 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