DIY javascript stack trace
Javascript functions have a handy local variable called arguments that you can use to get information about the currently executing function. This can be used to build your own stack trace in any browser for situations where you can’t use a debugger to get information about your code.
That’s madness!
Yes it is. In most cases there are better tools like Firebug that have a full javascript debugger that you can use to get a stack trace whenever you want without having to do any tricksy javascript coding:
I originally wrote this code because I had to debug a page that was running in the WinForms web browser component. The page worked fine when running in regular IE but totally locked up when it was running in the browser component. I was on my own debugging a huge tangle of javascript event code without any debugger to help me.
Other places this might help is if you want to log stack traces on mouse events where breaking into the debugger will stop the execution, when you’re automating browser testing or if you want to be able to silently log information a nasty to test error condition running on someone else’s browser.
The code
Here’s a stack trace implementation that adds a new debugging method of trace() to all functions. It uses the function.caller property to walk the call stack and the arguments collection to create a method signature for each function in the call stack.
It’s been tested in Firefox 3, IE7, Safari 3 and Opera 9.6.
-
Function.prototype.trace = function()
-
{
-
var trace = [];
-
var current = this;
-
while(current)
-
{
-
trace.push(current.signature());
-
current = current.caller;
-
}
-
return trace;
-
}
-
Function.prototype.signature = function()
-
{
-
var signature = {
-
name: this.getName(),
-
params: [],
-
toString: function()
-
{
-
var params = this.params.length > 0 ?
-
"'" + this.params.join("', '") + "'" : "";
-
return this.name + "(" + params + ")"
-
}
-
};
-
if(this.arguments)
-
{
-
for(var x=0; x<this .arguments.length; x++)
-
signature.params.push(this.arguments[x]);
-
}
-
return signature;
-
}
-
Function.prototype.getName = function()
-
{
-
if(this.name)
-
return this.name;
-
var definition = this.toString().split("\n")[0];
-
var exp = /^function ([^\s(]+).+/|>;
-
if(exp.test(definition))
-
return definition.split("\n")[0].replace(exp, "$1") || "anonymous";
-
return "anonymous";
-
}
To use the code, call the trace() method on any function. You will only get a meaningful stack trace on a function that is currently running so in most cases you’d want to call trace() on the arguments.callee method of the current function:
-
var trace = arguments.callee.trace();
-
document.getElementById("output").innerHTML = trace.join("<br />\n");
How it works
The arguments collection is a local variable that is automatically created inside all javascript functions that contains a list of all parameters that are passed to the function. The arguments variable has a property called callee which is reference to the function itself. This is possible because functions are just a special type of object in javascript so they can be stored in a regular variable just like a number or a string can.
The arguments.callee property gives a reference to the currently running function. The function variable has a property called caller that gives a reference to the function that called the current function. This can be used to walk all the way up the function stack trace. We’ve reached the top of the stack when the caller property of a function returns null:
-
var current = this;
-
while(current)
-
{
-
trace.push(current.signature());
-
current = current.caller;
-
}
In most browsers, the function has a property called name that returns the name given to the function when it was created. IE doesn’t support this but calling the function’s toString() method will return the whole function definition and the name can be extracted from the definition. Anonymous functions don’t have to be given a name, so these functions will just return “anonymous” instead of a name:
-
Function.prototype.getName = function()
-
{
-
if(this.name)
-
return this.name;
-
var definition = this.toString().split("\n")[0];
-
var exp = /^function ([^\s(]+).+/|>;
-
if(exp.test(definition))
-
return definition.split("\n")[0].replace(exp, "$1") || "anonymous";
-
return "anonymous";
-
}
Limitations
It won’t work with recursive code. The caller property gives a reference to the function not to the function’s activation object. The activation object is like an instance of the function that sits on the call stack. I’d be interested in hearing if anyone finds a way to work around this problem.
More information
For ASP.NET users, Joel Rumerman has created an version of the trace code and has included a neat trick for getting useful function names from functions created using prototypes.
