Question

有时候，当我加载应用程序时，我会看到杂散的日志语句，而且我不记得如何调用日志语句。有没有办法从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开发者工具，但如果在任何其他浏览器中都可以使用，我会感兴趣。

Answer 1

你试过console.trace()吗？它适用于Chrome和Firefox。对于您的用例，您可以将日志别名跟踪。

也就是说，我通常将记录器语句包装在自定义记录器函数中，该函数本身包含我需要使用的任何东西，但是可以在生产中以编程方式禁用它以防止泄漏日志。

编辑：

目前还没有任何chrome：//标志可以让您设置该行为，但您可以在调用控制台之前执行此操作（例如在缩小的js顶部）：{{1} }

这将产生这种效果，（例如Chrome Canary＆＃39;控制台中的例子）：

console.log=console.trace;

Answer 2

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

你如何在团队中工作？

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

通过检查调用堆栈来理解问题意味着：嘿，我不需要文本消息，我不需要消息究竟发生了什么，只是在哪里。

获取控制台消息的堆栈跟踪

2 个答案: