javascript - Google Chrome 开发者工具中的自定义堆栈跟踪？

Question

我希望自定义在 Google Chrome 开发者工具的脚本选项卡中的 strack 跟踪面板中显示的项目。具体来说，我想过滤掉堆栈跟踪中的项目，并为堆栈跟踪中的某些项目添加更具描述性的名称，而不必重命名我的对象和函数。

我在 http://code.google.com/p/v8/wiki/JavaScriptStackTraceApi 找到了 V8 的 Stack Trace API但覆盖 Error.prepareStackTrace 似乎没有任何效果。

Answer 1

该页面上的描述肯定有点难以理解，这是如何完成的:

Error.prepareStackTrace = function(error, stack) {
    return stack;
};

var someObj = {
    someMethod : function () { 
        crash();
    }
}
function bar(barArg) { someObj.someMethod(); };
function foo(fooArg) { bar("barArgString"); };

function getTrace(e) {
    var stack = e.stack;
    var trace = "";

    for (var i = 0; i < stack.length; i++) {
        var frame = stack[i],
            func = frame.getFunction();

        trace += "\r" + frame.getThis() + "." + frame.getFunctionName();
    }
    return trace;
}

try {
    foo("fooArgString");
} catch (e) {
    alert("trace from catch(): " + getTrace(e));
}

这将显示:

trace from catch(): 
[object Object].someObj.someMethod
[object Window].bar
[object Window].foo
[object Window].

最后一帧是全局作用域(没有函数名)。

本质上，您对 prepareStackTrace() 的覆盖会导致 error.stack 成为您从 prepareStackTrace() 返回的任何内容。诀窍是 prepareStackTrace() 的第二个参数是一个 CallSite 对象数组——支持 getThis()、getFunctionName() 等的对象。

上面的代码重写了 prepareStackTrace() 以便它返回 CallSite 对象数组(上面的“stack”参数)，所以这意味着当您 try catch 错误时，Error.stack 将包含 CallSite 数组对象而不是通常的字符串形式的堆栈跟踪。另一种方法是在替换 prepareStackTrace() 函数内处理 CallSite 对象，并将替代堆栈跟踪作为字符串返回。

请注意 CallSite 对象非常挑剔。尝试执行 frame.toString()，或者只是尝试 alert(frame)(隐含地涉及 toString())，它崩溃了，Chrome 的开发者工具没有显示任何错误。