2015-02-09 79 views
1

有时,当我加载应用程序时,我会看到杂散的日志语句,但我不记得日志语句是如何调用的。有没有办法从Chrome开发人员工具中找到控制台日志消息的堆栈跟踪?获取控制台消息的堆栈跟踪

现在,我包的console.log与打印堆栈跟踪功能:

console.log = (function() { 
    var oldLog = console.log.bind(console); 

    return function() { 
    try { throw new Error(); } catch (e) { 
     oldLog(
     e.stack.split('\n') 
      .slice(2) 
      .map((line) => line.trim().replace('at', 'from')) 
      .join('\n') 
    ); 
    } 

    oldLog.apply(null, Array.prototype.slice.call(arguments)); 
    }; 
}()); 

这将打印堆栈跟踪,除了日志信息。为了这是有用的,我必须在我的任何代码运行之前插入此代码。有没有办法从控制台上找到这些信息,而不必添加这个包装?

我主要使用Chrome开发人员工具,但如果在任何其他浏览器中都有可能,我会很感兴趣。

+0

当您从代码(而不是控制台)执行console.log时,您可以一直查看控制台的右侧以查看位置(甚至可以单击它来打开它)。当然,如果你用自己的函数覆盖它,那么它就会工作,因为那么它只会指向你的替代console.log,而不是直接在代码中使用的那个。 – 2015-02-09 16:13:38

+0

啊,对。那么堆栈跟踪呢? – Robz 2015-02-09 16:16:56

+1

那些只存在错误,所以你将无法使用console.log来获取。你有没有尝试过console.trace? – 2015-02-09 16:17:26

回答

1

你试过console.trace()?它在Chrome和Firefox中可用。对于你的用例,你可以使用别名来追踪​​。这就是说,我通常将记录器语句包装在一个自定义记录器函数中,该函数本身包装我需要使用的任何东西,但是可以在生产中以编程方式禁用它,以防止泄漏日志。

编辑:

有当前没有任何的镀铬://标志,它可以让你设置的行为,但你可以在控制台前做这个被调用(比如在你的JS缩小的的顶部) :console.log=console.trace;

这将有这样的效果,(在Chrome金丝雀控制台为例):

> console.log("Hello, Robz"); 
VM929:2 Hello, Robz 
undefined 
> console.log = console.trace; 
function trace() { [native code] } 
> console.log("Hello, Robz"); 
    VM935:2 Hello, Robz 
    VM935:2 (anonymous function) 
    VM468:777 InjectedScript._evaluateOn 
    VM468:710 InjectedScript._evaluateAndWrap 
    VM468:626 InjectedScript.evaluate 
+0

哦,这很酷。 console.trace和我写的包装器一样有效。 '别名'你的意思是用我的包装做什么?我想这样做,而不必修改我的代码 - 我可以将它作为浏览器设置进行别名吗? – Robz 2015-02-09 16:21:42

+0

你的包装很优雅,但内置速度更快。我会更新我的答案,具体细节。 – msanford 2015-02-09 20:13:39

+0

你可以很容易地将它包装在一个'if()'中寻找你的部署环境:如果生产,'console.log = function(){};'如果你想采取一个小而薄弱的步骤来缓解你的日志泄漏。这反过来仍然可以被覆盖,所以最好的方法是使用预处理器(grunt?)来查找控制台并将其去除。 – msanford 2015-02-09 20:19:40

0

基本上。显示日志消息的来源是一个非常糟糕的主意。它会引导您编写既不属于代码也不能在没有堆栈跟踪的情况下进行本地化的日志消息。

你如何在团队中工作?

hey, i got a `ohoh!`-logging in file abc.js in line 3487! 

要通过检查调用堆栈理解这个问题的意思是:嘿,我并不需要一个文本消息,我不需要的消息究竟是怎么回事,只是在那里。

+1

确实。实际上,我正在尝试调试团队成员添加的日志语句,而不在消息中添加上下文:) – Robz 2015-02-09 16:37:04