A simple reverse engineering utility that shows all the functions executed for a particular flow. FireFlow is a firebug extension and adds a tab called "FlowTrace" to it. We at Imaginea (http://www.imaginea.com/
) developed it for troubleshooting in some of our internal js projects and thought it may be useful for others too.
Anonymous functions and js functions from *-min.js files are not shown in the trace.Demo
How to use
Assume that we are working on a flow which we do not know about. Using this plugin all we need to do to capture the functions is
1. Open Firebug, navigate to “FlowTrace”
2. Press Start in the extension menu bar
3. Perform the action on the actual page which triggers the flow.
4. Press Stop once the action completes
A trace of all js functions invoked during this time would be displayed in a tree format. 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.
Wanna Join Inhttps://github.com/Imaginea/FireFlow