獲取控制台消息的堆棧跟蹤

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頂部）執行此操作： 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

Answer 2

基本上。 顯示日志消息的來源是一個非常糟糕的主意。 它使您編寫既不屬於代碼也不可以在沒有堆棧跟蹤的情況下本地化的日志消息。

您如何與團隊合作？

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

通過檢查調用棧來理解問題的意思是：嘿，我不需要文本消息，我不需要消息到底發生了什么，只是在哪里。