2

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 ?

Community
  • 1
  • 1
Dan
  • 55,715
  • 40
  • 116
  • 154
  • 1
    1) You have my abject sympathies. 2) Have you tried checking the call stack when it stops at that jQuery line? It's not 100%, and the stack can be ridiculously long, or point at "external code" 3) Lastly, I just found this in a search, but I haven't used it, myself: http://www.sprymedia.co.uk/article/Visual+Event+2 – Jason M. Batchelor Jun 19 '14 at 21:02
  • 1)@JasonM.Batchelor, thank you very much for the link! 2) The call stack will not help because a) I can neither put my Javascript on pause nor put a breakpoint inside jQuery's event engine because of multiple `setInterval`s and `onmouseover`s set. b) When any event handler fires, the call stack is only one level deep. And what I need is to go deeper inside the library and get the array of callbacks attached to run on that particular event. PS: it looks like jQuery has become a write-only library (for those who remembers Perl) :). – Dan Jun 19 '14 at 22:21
  • possible duplicate of [How to find what code is run by a button/element in Chrome using Developer Tools](http://stackoverflow.com/questions/23472334/how-to-find-what-code-is-run-by-a-button-element-in-chrome-using-developer-tools) – Whymarrh Jun 20 '14 at 00:35

1 Answers1

1

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.

Sebastian Zartner
  • 18,808
  • 10
  • 90
  • 132