如何使console.log可配置

Question

在我的web-app中（在客戶端很重，在服務器端輕松），在開發中，我需要做很多調試， console.log非常有用，但理想情況下在生產中，一定不能顯示任何調試消息，所以我打算添加以下代碼：

window.production = false;  // set to true when in production mode.

if(window.production){    
    window.log = function(){};
}else{
    window.log = function(){
        console.log.apply(console, arguments);
    };
}    
//then replace all console.log(a, b, c, ...) into window.log(a, b, c, ...) in my code.

這是一個使調試可配置的好方法，或者我是否只需要刪除所有用於生產的console.log行的grunt ？

Answer 1

因此，如果你唯一的目標是不在生產中顯示調試消息，那么你有大量的選擇可供選擇！ 您還應該決定以下內容對您是否重要：

1. 能夠在日志語句之外執行其他工作，這些工作也不應該在生產中運行。
2. 最小化生產中的文件大小而不發送日志記錄代碼。
3. 多個日志級別或不同的日志記錄組。
4. 能夠在生產中打開/關閉這些日志記錄級別或組。
5. 最小化為每個日志語句鍵入的數量。

在一個非常基本的層面上簡單地呼叫

if (window.console && window.console.log)
{
    window.log = console.log.bind(console); // function devnull() { };
}
else
{
    window.log = function() { };
}

log('This is a log!');

足以讓你打開/關閉登錄。 這將滿足上面列表中的目標（5）並且運行良好。

一個替代解決方案適用於像uglify這樣可以刪除死代碼的縮小器，可以用你喜歡的東西包圍你的日志記錄語句（你可能不想污染全局命名空間）：

window.LogLevels =
{
    Off:        0x00000000,
    Error:      0x00000001,
    Warning:    0x00000002,
    Timing:     0x00000004,
    Data:       0x00000008,
    Status:     0x00000010,
    ...
    Verbose:    0x04000000,
};

window.LogLevel = LogLevels.Error | LogLevels.Warning;

window.ShouldLog = function(mask)
{
    return ((window.LogLevel & mask) === mask);
};

if (ShouldLog(LogLEvels.Error)) { log('This is an error!'); }

這將滿足條件（1），（3）和（4），並以（5）為代價設置解決（2）。

結合預定義的DEBUG常量（或類似），在構建步驟中，您可以使用正則表達式替換日志語句：

productionCode = debugCode.replace(/ShouldLog\(((?!LogLevels\.Error|LogLevels\.Warning)[^)]*)\)/g, 'DEBUG');

這將完全刪除代碼中的非錯誤和非警告級別日志記錄並滿足（2）。 你真的不希望有人偷看你的日志..加上更好的性能！ :)

獎勵如果您想獲得額外的時髦，可以使用以下內容（至少在Chrome中）為控制台中的每個日志記錄語句獲取堆棧跟蹤。 沒有更多'為什么這個日志被擊中'！

window.log = function ()
{
    console.groupCollapsed.apply(console, arguments);
    var stack = new Error().stack.split('\n');
    for(var i = 2; i < stack.length; i ++)
    {
        // Trim and remove 'at ';
        console.log('%c' + stack[i].trim().substring(3), 'padding-left: 10px; color: #777');
    }
    console.groupEnd();
};

Answer 2

如果您正在使用像Gulp.js或Grunt.js這樣的構建工具，那么有一些模塊可以做到這一點：

• gulp strip debug
• grunt strip debug