Google Chrome开发人员工具中的自定义堆栈跟踪？ [英] Customized Stack Traces in Google Chrome Developer Tools?

问题描述

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

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

该页面肯定有点难以遵循，下面是它是如何完成的：

  Error.prepareStackTrace = function（error，stack）{ 
返回堆栈; 
}; 
 
 var someObj = {
 someMethod：function（）{
 crash（）; 
} 
} 
功能栏（barArg）{someObj.someMethod（）; }; 
函数foo（fooArg）{bar（barArgString）; }; 
 
函数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; 
} 
 
尝试{
 foo（fooArgString）; 
} catch（e）{
 alert（catch from catch（）：+ getTrace（e））; 
} 
  

这将显示：

 从catch（）中追踪：
 [object Object] .someObj.someMethod 
 [object Window] .bar 
 [object Window] .foo 
 [object Window]。 
  

最后一帧是全局范围（无函数名称）。

基本上，您对prepareStackTrace（）的重写会导致error.stack成为您从prepareStackTrace（）返回的任何内容。技巧是prepareStackTrace（）的第二个参数是一个CallSite对象数组 - 它支持getThis（），getFunctionName（）等对象。

上面的代码覆盖prepareStackTrace（）以便它返回CallSite对象数组（上面的stack参数），所以这意味着当你尝试......捕获一个错误时，Error.stack将包含CallSite对象数组而不是通常的堆栈跟踪以字符串形式。另一种方法是在替换prepareStackTrace（）函数内处理CallSite对象，并将您的替代堆栈跟踪作为字符串返回。

请注意，CallSite对象确实非常挑剔。试着做frame.toString（），或者试图提醒（frame）（隐含地这涉及toString（）），并且崩溃，Chrome的开发人员工具显示没有错误。

I'm looking to customize the items that show up in the strack trace panel in the Scripts tab of Google Chrome's developers tools. Specifically, I want to filter out items in the stack trace and to add more descriptive names to some of the items on the stack trace without having to rename my objects and functions.

I found V8's Stack Trace API at http://code.google.com/p/v8/wiki/JavaScriptStackTraceApi but overriding Error.prepareStackTrace doesn't seem to have any effect.

解决方案

The description on that page is definitely a little hard to follow, here's how it's done:

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

This will show:

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

The last frame is global scope (no function name).

Essentially your override of prepareStackTrace() causes error.stack to become whatever you return from prepareStackTrace(). The trick is that the second argument to prepareStackTrace() is an Array of CallSite objects - the objects that support getThis(), getFunctionName() etc.

The code above overrides prepareStackTrace() so that it returns the Array of CallSite objects ("stack" parameter above), so this means when you try..catch an Error, Error.stack is going to contain the Array of CallSite objects instead of the usual stack trace in String form. Another approach would be to process the CallSite objects inside of your replacement prepareStackTrace() function and return your alternative stack trace as a String.

Note the CallSite objects are really finicky. Try to do frame.toString(), or just try to alert(frame) (implicitly this involves toString()) and it crashes and Chrome's developer tools show no error.

这篇关于Google Chrome开发人员工具中的自定义堆栈跟踪？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！