当我抛出异常时，如何获得JavaScript堆栈跟踪?

如果我抛出一个JavaScript异常自己(例如，throw "AArrggg")，我怎么能得到堆栈跟踪(在Firebug或其他)?现在我刚收到消息。

编辑:正如下面许多人所张贴的，可以获得JavaScript例外的堆栈跟踪，但我想获得我的异常的堆栈跟踪。例如:

function foo() {
bar(2);
}
function bar(n) {
if (n < 2)
throw "Oh no! 'n' is too small!"
bar(n-1);
}

当foo被调用时，我想要得到一个堆栈跟踪，其中包括对foo， bar， bar的调用。

541301 次浏览
小开

我不认为有什么内置的东西可以使用，但我确实发现了很多人自己卷的例子。

小开

如果你有firebug，在脚本选项卡中有一个“所有错误”选项。一旦脚本到达断点，你可以查看firebug的堆栈窗口:

截图

小开

在Firefox上比在IE上更容易获得堆栈跟踪，但从根本上来说，这是你想要做的:

将“有问题的”代码段包装在try/catch块中:

try {
// some code that doesn't work
var t = null;
var n = t.not_a_value;
}
catch(e) {
}

如果你要检查"error"对象的内容，它包含以下字段:

< p > e。fileName:问题产生的源文件/页 e.lineNumber:出现问题的文件/页中的行号 message:描述发生错误类型的简单消息 e.name:发生错误的类型，在上面的例子中它应该是'TypeError' e.stack:包含导致异常的堆栈跟踪

我希望这能帮到你。

小开
最佳答案

编辑2 (2017):

在所有现代浏览器中，您可以简单地调用:console.trace(); (MDN引用)

编辑1 (2013):

一个更好的(和更简单的)解决方案是使用Error对象的stack属性，如下所示:

function stackTrace() {
var err = new Error();
return err.stack;
}

这将产生如下输出:

DBX.Utils.stackTrace@http://localhost:49573/assets/js/scripts.js:44
DBX.Console.Debug@http://localhost:49573/assets/js/scripts.js:9
.success@http://localhost:49573/:462
x.Callbacks/c@http://localhost:49573/assets/js/jquery-1.10.2.min.js:4
x.Callbacks/p.fireWith@http://localhost:49573/assets/js/jquery-1.10.2.min.js:4
k@http://localhost:49573/assets/js/jquery-1.10.2.min.js:6
.send/r@http://localhost:49573/assets/js/jquery-1.10.2.min.js:6

给出调用函数的名称以及URL、它的调用函数等等。

原(2009):

修改后的这个代码片段可能会有所帮助:

function stacktrace() {
function st2(f) {
return !f ? [] :
st2(f.caller).concat([f.toString().split('(')[0].substring(9) + '(' + f.arguments.join(',') + ')']);
}
return st2(arguments.callee.caller);
}
小开

您可以访问Error实例的stack(在Opera中是stacktrace)属性，即使您抛出它。问题是，你需要确保你使用throw new Error(string)(不要忘记使用新而不是throw string。

例子:

try {
0++;
} catch (e) {
var myStackTrace = e.stack || e.stacktrace || "";
}
小开

Chrome/Chromium和其他使用V8的浏览器，以及Firefox，都有一个方便的界面来通过Error对象的stack属性获取堆栈跟踪:

    try {
// Code throwing an exception
throw new Error();
} catch(e) {
console.log(e.stack);
}

详细信息请参见V8的文档

小开

在Firebug上获得真正的堆栈跟踪的一种方法是创建一个真正的错误，比如调用一个未定义的函数:

function foo(b){
if (typeof b !== 'string'){
// undefined Error type to get the call stack
throw new ChuckNorrisError("Chuck Norris catches you.");
}
}


function bar(a){
foo(a);
}


foo(123);

或者使用console.error()后跟throw语句，因为console.error()显示堆栈跟踪。

小开

在谷歌Chrome(版本19.0及以上)中，简单地抛出异常就可以完美地工作。例如:

/* file: code.js, line numbers shown */


188: function fa() {
189:    console.log('executing fa...');
190:    fb();
191: }
192:
193: function fb() {
194:    console.log('executing fb...');
195:    fc()
196: }
197:
198: function fc() {
199:    console.log('executing fc...');
200:    throw 'error in fc...'
201: }
202:
203: fa();

将显示浏览器控制台输出的堆栈跟踪:

executing fa...                         code.js:189
executing fb...                         code.js:194
executing fc...                         cdoe.js:199
/* this is your stack trace */
Uncaught error in fc...                 code.js:200
fc                                  code.js:200
fb                                  code.js:195
fa                                  code.js:190
(anonymous function)                code.js:203

希望这对你有所帮助。

小开

在Firefox中，似乎不需要抛出异常。这就足够了

e = new Error();
console.log(e.stack);
小开

一个很好的(简单的)解决方案，正如在原始问题的评论中指出的那样，是使用Error对象的stack属性，如下所示:

function stackTrace() {
var err = new Error();
return err.stack;
}

这将产生如下输出:

DBX.Utils.stackTrace@http://localhost:49573/assets/js/scripts.js:44
DBX.Console.Debug@http://localhost:49573/assets/js/scripts.js:9
.success@http://localhost:49573/:462
x.Callbacks/c@http://localhost:49573/assets/js/jquery-1.10.2.min.js:4
x.Callbacks/p.fireWith@http://localhost:49573/assets/js/jquery-1.10.2.min.js:4
k@http://localhost:49573/assets/js/jquery-1.10.2.min.js:6
.send/r@http://localhost:49573/assets/js/jquery-1.10.2.min.js:6

给出调用函数的名称以及URL和行号、它的调用函数等等。

我有一个非常详细和漂亮的解决方案，我已经为我目前正在进行的一个项目设计，我已经提取和重做了一点，以使其普遍化。下面就是:

(function(context){
// Only global namespace.
var Console = {
//Settings
settings: {
debug: {
alwaysShowURL: false,
enabled: true,
showInfo: true
},
stackTrace: {
enabled: true,
collapsed: true,
ignoreDebugFuncs: true,
spacing: false
}
}
};


// String formatting prototype function.
if (!String.prototype.format) {
String.prototype.format = function () {
var s = this.toString(),
args = typeof arguments[0],
args = (("string" == args || "number" == args) ? arguments : arguments[0]);
if (!arguments.length)
return s;
for (arg in args)
s = s.replace(RegExp("\\{" + arg + "\\}", "gi"), args[arg]);
return s;
}
}


// String repeating prototype function.
if (!String.prototype.times) {
String.prototype.times = function () {
var s = this.toString(),
tempStr = "",
times = arguments[0];
if (!arguments.length)
return s;
for (var i = 0; i < times; i++)
tempStr += s;
return tempStr;
}
}


// Commonly used functions
Console.debug = function () {
if (Console.settings.debug.enabled) {
var args = ((typeof arguments !== 'undefined') ? Array.prototype.slice.call(arguments, 0) : []),
sUA = navigator.userAgent,
currentBrowser = {
firefox: /firefox/gi.test(sUA),
webkit: /webkit/gi.test(sUA),
},
aLines = Console.stackTrace().split("\n"),
aCurrentLine,
iCurrIndex = ((currentBrowser.webkit) ? 3 : 2),
sCssBlack = "color:black;",
sCssFormat = "color:{0}; font-weight:bold;",
sLines = "";


if (currentBrowser.firefox)
aCurrentLine = aLines[iCurrIndex].replace(/(.*):/, "$1@").split("@");
else if (currentBrowser.webkit)
aCurrentLine = aLines[iCurrIndex].replace("at ", "").replace(")", "").replace(/( \()/gi, "@").replace(/(.*):(\d*):(\d*)/, "$1@$2@$3").split("@");


// Show info if the setting is true and there's no extra trace (would be kind of pointless).
if (Console.settings.debug.showInfo && !Console.settings.stackTrace.enabled) {
var sFunc = aCurrentLine[0].trim(),
sURL = aCurrentLine[1].trim(),
sURL = ((!Console.settings.debug.alwaysShowURL && context.location.href == sURL) ? "this page" : sURL),
sLine = aCurrentLine[2].trim(),
sCol;


if (currentBrowser.webkit)
sCol = aCurrentLine[3].trim();


console.info("%cOn line %c{0}%c{1}%c{2}%c of %c{3}%c inside the %c{4}%c function:".format(sLine, ((currentBrowser.webkit) ? ", column " : ""), ((currentBrowser.webkit) ? sCol : ""), sURL, sFunc),
sCssBlack, sCssFormat.format("red"),
sCssBlack, sCssFormat.format("purple"),
sCssBlack, sCssFormat.format("green"),
sCssBlack, sCssFormat.format("blue"),
sCssBlack);
}


// If the setting permits, get rid of the two obvious debug functions (Console.debug and Console.stackTrace).
if (Console.settings.stackTrace.ignoreDebugFuncs) {
// In WebKit (Chrome at least), there's an extra line at the top that says "Error" so adjust for this.
if (currentBrowser.webkit)
aLines.shift();
aLines.shift();
aLines.shift();
}


sLines = aLines.join(((Console.settings.stackTrace.spacing) ? "\n\n" : "\n")).trim();


trace = typeof trace !== 'undefined' ? trace : true;
if (typeof console !== "undefined") {
for (var arg in args)
console.debug(args[arg]);


if (Console.settings.stackTrace.enabled) {
var sCss = "color:red; font-weight: bold;",
sTitle = "%c Stack Trace" + " ".times(70);


if (Console.settings.stackTrace.collapsed)
console.groupCollapsed(sTitle, sCss);
else
console.group(sTitle, sCss);


console.debug("%c" + sLines, "color: #666666; font-style: italic;");


console.groupEnd();
}
}
}
}
Console.stackTrace = function () {
var err = new Error();
return err.stack;
}


context.Console = Console;
})(window);

在GitHub(目前是v1.2)上查看它!你可以像Console.debug("Whatever");一样使用它，它会根据Console中的设置，打印输出和堆栈跟踪(或者只是简单的信息/没有额外的东西)。这里有一个例子:

Console.js

确保在Console对象中进行设置!您可以在跟踪的行之间添加间距，并将其完全关闭。下面是将Console.trace设置为false:

No trace

你甚至可以关闭显示的第一个信息(设置Console.settings.debug.showInfo到false)或完全禁用调试(设置Console.settings.debug.enabled到false)，这样你就再也不用注释掉调试语句了!把它们留在里面就行了。

小开

使用Chrome浏览器，可以使用console.trace方法:https://developer.chrome.com/devtools/docs/console-api#consoletraceobject

小开
有点晚了，但是，这里有另一个解决方案，自动检测 if参数。callee可用，并使用new Error()。如果没有，就堆叠。 在chrome, safari和firefox中测试

2个变体——stackFN(n)给出了离直接调用方n远的函数名，stackArray()给出了一个数组，stackArray()[0]是直接调用方。

在http://jsfiddle.net/qcP9y/6/试试吧

// returns the name of the function at caller-N
// stackFN()  = the immediate caller to stackFN
// stackFN(0) = the immediate caller to stackFN
// stackFN(1) = the caller to stackFN's caller
// stackFN(2) = and so on
// eg console.log(stackFN(),JSON.stringify(arguments),"called by",stackFN(1),"returns",retval);
function stackFN(n) {
var r = n ? n : 0, f = arguments.callee,avail=typeof f === "function",
s2,s = avail ? false : new Error().stack;
if (s) {
var tl=function(x) { s = s.substr(s.indexOf(x) + x.length);},
tr = function (x) {s = s.substr(0, s.indexOf(x) - x.length);};
while (r-- >= 0) {
tl(")");
}
tl(" at ");
tr("(");
return s;
} else {
if (!avail) return null;
s = "f = arguments.callee"
while (r>=0) {
s+=".caller";
r--;
}
eval(s);
return f.toString().split("(")[0].trim().split(" ")[1];
}
}
// same as stackFN() but returns an array so you can work iterate or whatever.
function stackArray() {
var res=[],f = arguments.callee,avail=typeof f === "function",
s2,s = avail ? false : new Error().stack;
if (s) {
var tl=function(x) { s = s.substr(s.indexOf(x) + x.length);},
tr = function (x) {s = s.substr(0, s.indexOf(x) - x.length);};
while (s.indexOf(")")>=0) {
tl(")");
s2= ""+s;
tl(" at ");
tr("(");
res.push(s);
s=""+s2;
}
} else {
if (!avail) return null;
s = "f = arguments.callee.caller"
eval(s);
while (f) {
res.push(f.toString().split("(")[0].trim().split(" ")[1]);
s+=".caller";
eval(s);
}
}
return res;
}




function apple_makes_stuff() {
var retval = "iPhones";
var stk = stackArray();


console.log("function ",stk[0]+"() was called by",stk[1]+"()");
console.log(stk);
console.log(stackFN(),JSON.stringify(arguments),"called by",stackFN(1),"returns",retval);
return retval;
}






function apple_makes (){
return apple_makes_stuff("really nice stuff");
}


function apple () {
return apple_makes();
}


apple();
小开
我必须用IE11调查smartgwt中的无尽递归，所以为了深入调查，我需要一个堆栈跟踪。问题是，我无法使用开发控制台，因为这样的复制更加困难 在javascript中使用以下方法:

try{ null.toString(); } catch(e) { alert(e.stack); }
小开

您可以使用这个库http://www.stacktracejs.com/。非常好

从文档

你也可以传入你自己的错误来获得一个不可用的stacktrace 在IE或Safari 5中-

<script type="text/javascript" src="https://rawgithub.com/stacktracejs/stacktrace.js/master/stacktrace.js"></script>
<script type="text/javascript">
try {
// error producing code
} catch(e) {
var trace = printStackTrace({e: e});
alert('Error!\n' + 'Message: ' + e.message + '\nStack trace:\n' + trace.join('\n'));
// do something else with error
}
</script>
小开

这将为现代Chrome, Opera, Firefox和IE10+提供堆栈跟踪(作为字符串数组)

function getStackTrace () {


var stack;


try {
throw new Error('');
}
catch (error) {
stack = error.stack || '';
}


stack = stack.split('\n').map(function (line) { return line.trim(); });
return stack.splice(stack[0] == 'Error' ? 2 : 1);
}

用法:

console.log(getStackTrace().join('\n'));

它从堆栈中排除了自己的调用以及Chrome和Firefox(但不包括IE)使用的标题“Error”。

它不应该崩溃在旧的浏览器，而只是返回空数组。如果你需要更通用的解决方案，看看stacktrace.js。它支持的浏览器列表确实令人印象深刻，但在我看来，对于它所打算执行的小任务来说，它太大了:37Kb的精简文本，包括所有依赖项。

小开

对Eugene的回答进行了更新:为了让IE(特定版本?)填充stack属性，必须抛出错误对象。下面的代码应该比他当前的例子更好，并且在IE中应该避免返回undefined。

function stackTrace() {
try {
var err = new Error();
throw err;
} catch (err) {
return err.stack;
}
}

注1:这类事情只应该在调试时执行，在运行时禁用，特别是频繁调用时。注2:这可能不能在所有浏览器中工作，但似乎可以在FF和IE 11中工作，这很适合我的需求。

小开

哇——我在6年里没有看到一个人建议我们在使用stack之前先检查一下它是否可用!在错误处理程序中，最糟糕的事情就是因为调用了不存在的东西而抛出错误。

正如其他人所说，虽然stack现在使用起来很安全，但在IE9或更早的版本中不受支持。

我记录我的意外错误和堆栈跟踪是相当必要的。为了获得最大支持，我首先检查Error.prototype.stack是否存在并且是一个函数。如果是这样，那么使用error.stack是安全的。

        window.onerror = function (message: string, filename?: string, line?: number,
col?: number, error?: Error)
{
// always wrap error handling in a try catch
try
{
// get the stack trace, and if not supported make our own the best we can
var msg = (typeof Error.prototype.stack == 'function') ? error.stack :
"NO-STACK " + filename + ' ' + line + ':' + col + ' + message;


// log errors here or whatever you're planning on doing
alert(msg);
}
catch (err)
{


}
};

因为stack是一个属性而不是一个方法，所以即使在旧的浏览器上也可以安全地调用它。我仍然很困惑，因为我很确定检查Error.prototype以前为我工作，现在它没有-所以我不确定发生了什么。

小开 
<script type="text/javascript"
src="https://rawgithub.com/stacktracejs/stacktrace.js/master/stacktrace.js"></script>
<script type="text/javascript">
try {
// error producing code
} catch(e) {
var trace = printStackTrace({e: e});
alert('Error!\n' + 'Message: ' + e.message + '\nStack trace:\n' + trace.join('\n'));
// do something else with error
}
</script>

这个脚本将显示错误

小开

使用console.error(e.stack) Firefox只显示日志中的堆栈跟踪， Chrome也会显示这条消息。 如果邮件中包含重要信息，这可能是一个糟糕的惊喜。

小开

功能:

function print_call_stack(err) {
var stack = err.stack;
console.error(stack);
}

用例:

     try{
aaa.bbb;//error throw here
}
catch (err){
print_call_stack(err);
}
小开 
function stacktrace(){
return (new Error()).stack.split('\n').reverse().slice(0,-2).reverse().join('\n');
}
小开

这里有一个答案，给你最大的性能(IE 6+)和最大的兼容性。兼容IE 6!

    function stacktrace( log_result ) {
var trace_result;
// IE 6 through 9 compatibility
// this is NOT an all-around solution because
// the callee property of arguments is depredicated
/*@cc_on
// theese fancy conditinals make this code only run in IE
trace_result = (function st2(fTmp) {
// credit to Eugene for this part of the code
return !fTmp ? [] :
st2(fTmp.caller).concat([fTmp.toString().split('(')[0].substring(9) + '(' + fTmp.arguments.join(',') + ')']);
})(arguments.callee.caller);
if (log_result) // the ancient way to log to the console
Debug.write( trace_result );
return trace_result;
@*/
console = console || Console;	// just in case
if (!(console && console.trace) || !log_result){
// for better performance in IE 10
var STerror=new Error();
var unformated=(STerror.stack || STerror.stacktrace);
trace_result = "\u25BC console.trace" + unformated.substring(unformated.indexOf('\n',unformated.indexOf('\n')));
} else {
// IE 11+ and everyone else compatibility
trace_result = console.trace();
}
if (log_result)
console.log( trace_result );
    	

return trace_result;
}
// test code
(function testfunc(){
document.write( "<pre>" + stacktrace( false ) + "</pre>" );
})();

小开

试试

throw new Error('some error here')

这对铬来说非常有效:

enter image description here

小开

此填充代码在现代(2017)浏览器(IE11, Opera, Chrome, FireFox, Yandex)中工作:

printStackTrace: function () {
var err = new Error();
var stack = err.stack || /*old opera*/ err.stacktrace || ( /*IE11*/ console.trace ? console.trace() : "no stack info");
return stack;
}

其他答案:

function stackTrace() {
var err = new Error();
return err.stack;
}

不能在IE 11中工作!

使用arguments.callee.caller -不是在任何浏览器的严格模式下工作!

小开

至少在Edge 2021中:

console.groupCollapsed('jjjjjjjjjjjjjjjjj')
console.trace()
try {
throw "kuku"
} catch(e) {
console.log(e.stack)
}
console.groupEnd()
traceUntillMe()

你完了，我的朋友


提交答案