DevTools Feature Request: Show Stack Trace In Event Listeners

I was asked a question in my DevTools talk at ComoRichWeb this month.

Q: How do the event listeners work when the events are bound with jQuery?

A: Not well. I rarely use that section when using a framework to bind events, because the event listeners never point back to the actual function being bound - instead they link to the jQuery source.

The info you see on event listeners bound with jQuery is not very useful. It shows you the actual function where the events were bound (which is inside of the jQuery source).

Open up this simple event listener test case in devtools (inspect the button and view event listeners) to see what I mean.

What Information Do You Want From Event Listeners?

What I am actually interested in is the actual callback that jQuery is adding. Of course devtools shouldn't have to handle jQuery (or other frameworks) specifically, but what if it showed the callstack that caused the event to be bound?

So, by setting a breakpoint to the actual event event binding, here is what I got. This is what I am actually interested in:

Solution?

And putting my photo editing skills to the test, here is what it could look like (of course, this should be styled consistently). Clicking on one of the entries in the callstack would take you into the relevant place in the scripts panel.

This would be ideal. Is this even possible? Or there is an existing or better way to get around this that I don't know about?

Comments

  1. TJ Singleton Says:

    June 21st, 2012 at 9:01 am

    YES PLEASE! This would be so useful.

  2. Dmitry Pashkevich Says:

    November 16th, 2012 at 6:52 am

    I would love to have that!

    Don’t know about the general case but custom solutions for popular frameworks would be easier to do (as in http://www.illuminations-for-developers.com/)… perhaps as plugins that are tightly integrated developer tools?

  3. Luis Martin Says:

    January 16th, 2013 at 6:16 am

    Hey! You replied to my similar problem in Google Groups with this request you describe, and the link to this page, and now that I’ve seen your whole proposal I must support it all the way! This is a must-be-done solution to debug with frameworks like jQuery.

  4. Brian Says:

    January 16th, 2013 at 7:02 am

    A link to the devtools request that Luis opened: https://groups.google.com/d/topic/google-chrome-developer-tools/NTcIS15uigA/discussion

Comments are closed. Please contact me instead.