javascript debugging - is there a way to tell what functions are being executed?

Question

I'm examining someone else's code and I'm trying to find out what functions are executing when I take certain actions. Is there a way in firebug to do this? (or any other way).

In this particular case I'm trying to find out what happens when I click the 'next' and 'previous' buttons in the editor found at http://trirand.com/blog/jqgrid/jqgrid.html, "Live Data Manipulation >> Navigator" (then clicking the pencil, then the arrows at the bottom).

I've tried grabbing the item I'm clicking and looking at its properties in the console by doing this:

>>> obj = $('#nData')
>>> console.log(obj)

but there doesn't seem to be a handler for click.

What would be wonderful if if there's a way to see what functions are called when I perform an action.

Answer 1

In firebug, in the Script tab, put a breakpoint in the line you want to inspect. In the right, there is a "Stack" tab where you can see the current stack trace!

Answer 2

FireQuery may be of some use to you. It hooks into Firebug and displays additional meta-data on all DOM elements which have been modified by JQuery.

Answer 3

You can use Firebug's "Break on next" (the pause looking button in the toolbar)

Then you can the step buttons to move around. Set it to use that, and then click whichever button you want to check the action for.

Since my description probably sucks, check this out.

Edit: This sounds like what you want:

It's primary goal is breaking the Javascript execution at required place in the code that is unknown to the developer beforehand. The typical example, probably well known to most web developers is: "Where in the hell is the code, which is executed if I click this button?".