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


FireFlow in Action
.

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.

Be Sociable, Share!

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

Good one.. Thanks for posting.

Really good one …thnx rohit for sharing it ..

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 ?

is a best tool for js manipulation
waiting for next version
thank you

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!

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.

Why the search doesn’t toggle to that position instead just highlights it?

Is there a way to write it to a file ? I can’t see indentation of the tree structure if I simply copy paste

thank you

Can we get the execution time of each function ?

@Aditya
execution time is the job of the profiler and it already does that. FireFlow is just for tracing.

Hi Apurba,

I would like to contribute. I have some features which I implemented for this like export the trace to a text file. Get the execution time for each instance of the function etc..

@Aditya
Thats great, if you could raise a pull request on github, I would merge that to the code base. For execution time, may put a switch to enable it on demand

Hi Apurba,

Is it possible to control the start and stop on the panel from an external source rather than the user doing it manually.

Thanks,
Deepthi

How can I save the trace to a file? It doesn’t seem select works…?

Hi Apurba,
Can disabling anonymous and .min.js files be an option? I’m trying to learn more about some of the JS frameworks like jQuery by studying production sites, and this feature would be useful.
Thanks!
Matt

We are looking at some enhancements which would support this, hopefully we will release the next version by Jan end. I think with the firefox add-on review process it will take a few more weeks, meanwhile the plugin would be available on our github.

Thanks – I’ve been looking for this for a while!

Wow this looks great

gr8!

is it still planned an option for anonymous functions?
also, with js deminifier even a *-min.js is quite readable and an option to enable it would be great!

good work anyway :)

Hey, its really useful tool.

Can you please make it to display the timestamp of inidividual calls with milli second precision? Or the increasing time starting from 0.0 ?

@Viveks interesting idea, would be great if you can explain what you aim to do with the timestamps. If you want to get a performance perspective profiler is a better choice, the overheads introduced in capturing the trace undermine the utility of this tool for profiling.

Leave a comment

(required)

(required)