Javascript reverse engineering
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.
Future Work
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.
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
Comments
Thanks for that.
Any idea if you can do the same for Chrome Dev Tools and the upcoming experimental APIs http://code.google.com/chrome/extensions/trunk/experimental.devtools.html ?
THIS IS AWESOME!
This is NOT like the millions of useless extensions out there
I missed something like this since years!
I just wish filters, clear button, will be added soon…
thanks!
My current priority is making something like this for flash, about two weeks from there. I will go back to filters after that. Chrome already has awesome support for profiling (light and nice tree structure), so putting filters in there is the only thing left, will do that if I see a few more comments about chrome support (I do this part time, so speed is certainly a bottleneck, the code is open source though and is at github https://github.com/Imaginea/FireFlow, the latest unreleased work in progress version integrates with the js tab of firebug which makes using it easier).
Hey how about making it live before you continue to filters? live as in without the Start/Stop button
@bit
tracing is a very slow operation, if I add display to it, it would become even slower, as dom manipulation would also be done in the same flow as method breakpoint callback. Stop actually stops listening, giving us some cpu cycles to waste on the display.
RFE!!!
Where’s an option to save the trace?!
I can’t even copy/paste it… I don’t want to lose it…
I want to run it through a filter as it’s got a “prefix” URL before every line that is about 200-300 characters wide…
I’d type in a sample line, but I can’t cut/paste (nor save to file…. (or if I can.. don’t see how!)…
Was a shock to see all my requests being routed through ‘google’ when I was on the mozilla addon’s site. all the requests were going though google — couldn’t figure out why google was being hit — as it wasn’t explicitly called anywhere… that’s because it’s called for everything!…
I wonder if it has something to do with me having a ‘plus account’…?
Weird…
otherwise, can be a eye opener!…
@Astara
for copy/paste use keys (shift-arrows, ctrl+c). We are working on trimming off the urls and adding filter, hopefully another month and there will be a release.
Good one.. Thanks for posting.