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

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://flags 可以让您设置该行为，但您可以在调用控制台之前执行此操作(例如在缩小的 js 的顶部): console.log =console.trace;

这将产生以下效果(Chrome Canary 控制台中的示例):

> 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