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

Question

我想在Google Chrome开发人员工具的"脚本"标签中自定义显示在strack trace面板中的项目.具体来说,我想过滤掉堆栈跟踪中的项目,并为堆栈跟踪中的某些项目添加更多描述性名称,而无需重命名我的对象和函数.

我在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(),以便它返回调用点的对象的阵列("堆叠"以上的参数),因此这意味着当您在try..catch错误,Error.stack也会包含调用点的阵列对象,而不是字符串形式的通常堆栈跟踪.另一种方法是处理替换prepareStackTrace()函数内部的CallSite对象,并将替代堆栈跟踪作为String返回.

请注意,CallSite对象非常挑剔.尝试做frame.toString(),或者只是尝试警告(框架)(隐含地涉及toString())并且它崩溃并且Chrome的开发人员工具没有显示错误.