In any programming language, I can trace any function and know which function is called by other. But in Javascript , I don't know how, since the code is not written by me and Firebug does not give this feature - as far as I know.

An example :

I want to display the function names of each function that is called when clicking on XYZ Element, and display them in order.

In any programming language, I can trace any function and know which function is called by other. But in Javascript , I don't know how, since the code is not written by me and Firebug does not give this feature - as far as I know.

An example :

I want to display the function names of each function that is called when clicking on XYZ Element, and display them in order.

• javascript
• stack-trace

6 Answers 6

Found this: A javascript stacktrace in any browser, James says they have a github account now

function printStackTrace() {
  var callstack = [];
  var isCallstackPopulated = false;
  try {
    i.dont.exist+=0; //doesn't exist- that's the point
  } catch(e) {
    if (e.stack) { //Firefox
      var lines = e.stack.split('\n');
      for (var i=0, len=lines.length; i<len; i++) {
        if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
          callstack.push(lines[i]);
        }
      }
      //Remove call to printStackTrace()
      callstack.shift();
      isCallstackPopulated = true;
    }
    else if (window.opera && e.message) { //Opera
      var lines = e.message.split('\n');
      for (var i=0, len=lines.length; i<len; i++) {
        if (lines[i].match(/^\s*[A-Za-z0-9\-_\$]+\(/)) {
          var entry = lines[i];
          //Append next line also since it has the file info
          if (lines[i+1]) {
            entry += " at " + lines[i+1];
            i++;
          }
          callstack.push(entry);
        }
      }
      //Remove call to printStackTrace()
      callstack.shift();
      isCallstackPopulated = true;
    }
  }
  if (!isCallstackPopulated) { //IE and Safari
    var currentFunction = arguments.callee.caller;
    while (currentFunction) {
      var fn = currentFunction.toString();
      var fname = fn.substring(fn.indexOf("function") + 8, fn.indexOf('')) || 'anonymous';
      callstack.push(fname);
      currentFunction = currentFunction.caller;
    }
  }
  output(callstack);
}

function output(arr) {
  // Output however you want
  alert(arr.join('\n\n'));
}

You can see the stack trace of any error with the stack() function call (on Firefox). Creating a simple function to print a stack trace could look like this:

function getStackTrace() {
  try {
    unusedVariable++; // This creates an error we can trace
  }
  catch (e) {
    return e.stack;
  }
}

Other browsers have different ways of printing the stack trace, but this should get you what you need for Firefox.

Hope this helps.

DynaTrace AJAX has some of the features like that. Not exactly what you are looking for but gives you the events and functions bound on an element and helps your troubleshooting. Had a free download, check it.

If you simply want to debug your code, your best option is to get a debugger plug-in for your browser. The Firebug plug-in does provide stack traces. (see here)

If you want to do it from within your code, there is no standard language feature of JavaScript that allows you to do this. Different browsers may implement non-standard extensions, but you shouldn't rely on them.

As "Casablanca" mentions... please note from the site of the aforementioned js-stack-trace ( http://www.eriwen.com/javascript/js-stack-trace/ ) that in FireFox and Chrome:

Obvious easy way: Firebug, Chrome Dev Tools, Dragonfly etc.

You can easily get a stack trace at any time by calling console.trace() in your Javascript or in the Firebug console.

Since it sounds like you want to inspect the stack and take pieces of the information (the function names), sounds like you need

• stackinfo

which was built exactly for that purpose.