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

http://jsbin.com/garokalocu

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.

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!

Answer 1

您将 jQuery 视为处理程序，因为您使用 jQuery 来创建这些侦听器。触发事件时调用 jQuery 代码。如果您使用普通的 JS addEventListener，它们将显示在事件中，而无需单步执行。

根据这里的文章，该功能将出现在 Firefox 34 中，因此如果您使用 Firefox beta，它应该具有您想要的行为。