How do I debug jQuery events using Firefox debugger?

Question

I've been wracking my brain over this and cannot figure it out for the life of me.

Here's a test page I built for the sake of this discussion:

Let's assume this page is very complex and I didn't build it, and I'm trying to see the code that runs when the user clicks "Do It." So I open the debugger, open the side pane and click "Events." I checkmark the click event for #execute which is the button.

enter image description here

Now I click the button, and the code hits the breakpoint. But strangely, the name "Bob" has already been filled in, so clearly it flew right past the actual code, and lands me here:

enter image description here

I don't understand what's going on here. So I tried something else, a new feature in Firefox that I thought might be handy. If I inspect the code, there are little "ev" tags on certain DOM elements. Supposedly you can click those and see the code.

enter image description here

Well, that was fruitless. I'd be forever grateful if someone could please tell me how on earth to debug jQuery events, and see the actual code that gets executed. Thanks!

I don't think this is a dupe, there is actually a specific feature in Firefox that handles jQuery event handlers, please see here and here. Note that this feature is only available as of Firefox 34, now in Beta. — therealjeffg
– therealjeffg, Commented Nov 4, 2014 at 3:44
@canuckistani Thank you. No, of course no one bothers to do any thinking or digging. Just an automatic vote to shut down the question. — CaptSaltyJack
– CaptSaltyJack, Commented Nov 4, 2014 at 4:21
I upvoted it - myself I bumped into the same problem of the info being pointless. I wish I could go directly to the statement actually attached an event. — user776686
– user776686, Commented Apr 17, 2015 at 11:24

NoBugs · Accepted Answer · 2014-11-04 04:53:46Z

You see jQuery as the handler because you used jQuery to make those listeners. jQuery code is called when event is triggered. If you used normal JS addEventListener, they will show up in the event without having to step through.

According to the article here the feature is coming in Firefox 34, so if you use Firefox beta it should have the behavior you want.

Collectives™ on Stack Overflow

How do I debug jQuery events using Firefox debugger?

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related