One of the things that I miss in js is a simple trace utility that will show me all the functions executed for a particular flow. I solved my problem with this simple firebug extension “fireflow”, hope it will help you too.
It can be installed from xpi location
You can also download the xpi to a local folder and install from the local folder (File->Open).
Given below is screenshot of a trace captured using this plugin
See it in action
In this screencast, requestTree calls getVisibleSlicesPgTop, then requestSlices which calls findRequest and so on.
How to use
Assume that I am working on the page given in the screenshot and am trying to enhance the “Execute Query” flow, the sad part is I was not the first guy to work on the functionality, so am not sure what functions are actually involved. Using this plugin my task to track the functions would be as simple as
1. Open Firebug, navigate to “FlowTrace”
2. Press Start in the extension menu bar
3. Click on “Execute Query” in the actual page.
4. Press Stop once I see the result of “Execute Query”
A trace of all js functions invoked during this time would be displayed. The trace contains information about the script source, the line number and number of invocations. All the nodes in the trace are linked to their actual source.
How it works
This plugin hooks into the firefox debugging framework and registers for method callbacks. Each method call is thus recorded and then represented in this tree format. The current version excludes all anonymous functions and all functions coming from *-min.js sources.
Difference between this and profiling
While profiling is about getting a list of all invocations irrespective of the order, this tool gives a in order execution chain. We are interested in code flow rather than profiling.
Instead of using arbitrary filters, am planning to work on exposing include and exclude rules to the end user. Feel free to request any features or enhance it.