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

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:

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.

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'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:

http://jsbin./garokalocu

Let's assume this page is very plex 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.

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:

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.

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!

• javascript
• jquery
• debugging
• firefox
• firefox-developer-tools

• 3 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 Commented Nov 4, 2014 at 3:44
• 3 @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 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 Commented Apr 17, 2015 at 11:24
• 1 You can now, in the latest version! – CaptSaltyJack Commented Apr 17, 2015 at 14:02

1 Answer 1

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 ing in Firefox 34, so if you use Firefox beta it should have the behavior you want.