Get a Javascript or jQuery stack trace from one breakpoint to another in Firebug/Chrome?

Question

I am digging through a singe-page Javascript-heavy application trying to track down a very specific portion of the code where something happens (not directly tied to an event, so tracking it down with a tool like Firequery is proving ineffective).

I was wondering if there was any way to pause the execution of the Javascript at one breakpoint, set another breakpoint, and log a trace of all the functions pushed and popped off of the stack so I can trace down the specific place in the codebase (many JS files) that this happens.

Thanks.

EDIT: It should be noted, too, that the jQuery trace bookmarklet isn't helping much in this case.

Answer 1

Probably you can achieve what you want better by following what @sachleen wrote.

But regarding the original question:

In Firebug, you have "Profile" button in "Console" tab. It doesn't list the functions in the order of their execution, just stats of how many invocations happened per-function. If you have multiple invocations of some functions, it may not prove much helpful. But it depends.

In Chrome, you have "Profiles" tab, which displays output a little bit differently [and you can choose two methods of displaying output: "Heavy (bottom up)" and "Tree (top down)"]. Choose one depending on your needs. In fact the Chrome's output is a bit awkward for me.

Basically, the profiling itself works the same in both, you click a button to start profiling, and click it again to stop it when you're done.

Answer 2

In Chrome dev tools, if you set a break point, you can manually step through (F10) the code line by line until you get to your desired end point. This will go through everything the JS is doing, including taking you through the other files you might have.