Search code examples
javascriptjqueryfirebuggoogle-chrome-devtoolsfirebug-lite

jQuery + DevTools: how can I quickly get the event handler(s) attached to the element

I'm asking this question because I have a mess of 40K+ lines of unstructured jQuery code in the project I'm currently working on. Even the most intelligent search over this codebase fails to answer the simplest question like

"What happens if I click this red button?"

meaning it can't point me to the event handler set in the messy code.

Searching for selectors in codebase does not help me, I get 300+ search results.

I know that there is 'Event Listeners' tab in DevTools, but it points me to a line in jQuery code, so I have completely no use of it (at least I don't know how to).

There could be a good solution for that - to press pause in DevTools, so if you click that red button, DevTools jumps to the line of code currently executed (jQuery event handler), and you can dig your handler out after some painful iterating over jQuery library). But someone has added lots of banners with setInterval(... , 100) and mouseovers leaving me no chance to use this trick here...

(Maybe there is a way to get an array of event handlers from the deeps of jQuery???)

So, I need to find that function set in

$('#my.red button').click(function() { /* bla */ });

I believe there should be a rescue, friends.

I need an extremely time-efficient method/technique, because I need to perform this searches hundreds of times per day.

PS: and what if the handler was set using $.live ?

Solution

  • Firebug 2.0 has an Events side panel within its HTML panel, which is able to show the user-defined functions if the option Show Wrapped Listeners is enabled.

    Show Wrapped Listeners option.

    The wrapped functions are preceeded by an arrow.