2015-02-09 44 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