如何跟踪 JavaScript 事件 （堆栈跟踪）？

Question

在任何编程语言中，我都可以追踪任何函数并知道哪个函数被其他函数调用。但在Javascript中，由于该代码并非由我编写，而且据我所知，Firebug没有提供此功能，因此我不知道该如何做。

例如：当单击XYZ元素时，我想显示每个被调用的函数名称，并按顺序显示它们。

- Abdullah

Answer 1

发现了这个：任何浏览器上的JavaScript堆栈跟踪，詹姆斯说他们现在有一个GitHub账户

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'));
}

- Allen Rice

---

值得注意的是，他们现在有一个Github网站，https://github.com/eriwen/javascript-stacktrace。 - James McMahon

Answer 2

您可以使用stack()函数调用（在Firefox中）查看任何错误的堆栈跟踪。创建一个简单的函数来打印堆栈跟踪可能如下所示：

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

其他浏览器打印堆栈跟踪的方式不同，但这应该能够让你在Firefox中得到你需要的信息。

希望这可以帮助你。

- godswearhats

---

在 Firefox 3.6.6 上至少应该是 e.stack。 - Xavier Combelle

Answer 3

看起来你想要检查堆栈并获取信息片段（函数名称），似乎需要

• stackinfo

这个工具正是为此目的而建立的。

- B T

Answer 4

DynaTrace AJAX 具有一些类似的功能。虽然不完全符合您的要求，但它可以为您提供绑定在元素上的事件和函数，并帮助您进行故障排除。它还提供免费下载，可以去看看。

- Teja Kantamneni

Answer 5

如果您只是想调试代码，最好的选择是为您的浏览器获取一个调试器插件。Firebug插件确实提供堆栈跟踪。（请参见此处）

如果您想从代码内部执行此操作，则JavaScript没有标准语言功能可供使用。不同的浏览器可能实现非标准扩展，但您不应该依赖它们。

- casablanca

Answer 6

正如“卡萨布兰卡”所提到的...请注意在前述js-stack-trace网站（http://www.eriwen.com/javascript/js-stack-trace/）中，在FireFox和Chrome中：

明显易行的方法：Firebug，Chrome Dev Tools，Dragonfly等。

您可以通过在JavaScript或Firebug控制台中调用console.trace()来随时轻松获取堆栈跟踪。

- Ideogram