views:

86

answers:

2

(I know some people already asked questions about js profile, but that's not what I need if I understand them correctly.)

I'd like to trace the execution of javascript to collect the information of 1) which function is invoked, 2) the time when the function is invoked, and 3) the execution time of the function.

I want to collect the information online (on deployed code) but not in-house. So, the trade-off has to be light. Also, I don't want to manually add a line before and after where a function is invoked. However, it would be great if there's a way that can dynamically instrument the code.

Thanks in advance!

+1  A: 

I don't think that there is any system whereby JavaScript will automatically track the time a function starts and the time a function stops. That is likely something you will have to add yourself. If this is what you need, you may want to consider using PHP to serve up your JavaScript and use a regular expression to find the beginnings and ends of each function with a regex or something like that.

Your RegExp might look like this (completely untested, so you'll have to experiment):

/function [A-Za-z_$][A-Za-z0-9_$]*{(.*?)}/i

Once you have access to the inside of the function, you could replace that value with the function to track its beginning and end wrapped around the original function definition.

This has the benefit of doing exactly what you want, without worrying about modifying how your js code functions. It is then something the server will handle entirely.

Either that or, instead of calling the function directly, use a wrapper function:

function wrapFunction( func, context, argList )
{ 
    // Replace with however you are storing this.
    console.log( new Date().getTime() );
    func.apply( context, argList );
    console.log( new Date().getTime() );
}

This has the benefit of being a lot cleaner than having the server update your JS for you. Unfortunately, it also means having to re-write the JS manually.

My recommendation would be to simply adapt a logging syntax and use that. Most loggers will output a timestamp, a context, a level, and a specific message. If you simply call the logger at the beginning and end of the function, it will do exactly what you're looking for. Further, since many are configurable, you would be able to have it display to the JS console in Firefox, send information to the server, or completely disabled if you so chose.

There are a list of JS loggers here:

JavaScript loggers

This would unfortunately require you to manually update everything, but it seems like the simplest way to get 90% of what you're looking for out of the box.

Christopher W. Allen-Poole
Chris, Thanks for suggestions! Meanwhile, I've just found some cool code that is really inspiring. Have a look at here: http://gist.github.com/189144
Paul
A: 

Perhaps the profiler in FireBug can help you track down slow functions.

Here's a video detailing the profiling options. (Index: 3:20).

roosteronacid