Javascript reverse engineering 23

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.

Leave a comment

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

23 thoughts on “Javascript reverse engineering

  • Eli Spizzichino

    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…

  • Apurba Nath Post author

    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.

  • Astara

    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’…?


    otherwise, can be a eye opener!…

  • Apurba Nath Post author

    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.

  • Aditya

    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

  • Apurba Nath Post author

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

  • Aditya

    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..

  • Apurba Nath Post author

    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

  • Deepthi

    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.


  • Matt

    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.

    • Apurba Nath Post author

      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.

  • spoutnik


    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 :)

  • Viveks

    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 ?

    • Apurba Nath Post author

      @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.