Console.log'u üretim kodundan kaldırmalı mıyım?

Şu anda kodumun her yerinde şu JS ifadesine sahibim:

window.console && console.log("Foo");

Bunun maliyetli olup olmadığını veya üretimde herhangi bir olumsuz yan etkisi olup olmadığını merak ediyorum.

İstemci tarafında oturum açma konusunda özgür müyüm yoksa gitmeli miyim?

DÜZENLEME: Sonunda, sanırım ben (ve başka biri mi?) Bulabileceğim en iyi argüman, sunucu ile istemci arasında bırakılan günlük mesajlarını bırakarak aktarılan muhtemelen ihmal edilemeyecek miktarda fazladan veri olmasıdır. üretim kodu tamamen optimize edilecek, istemciye gönderilen javascript boyutunu küçültmek için günlük kaydı kaldırılmalıdır.

Sen gerektiğini değil bir üretim sayfasına geliştirme araçları ekleyin.

Diğer soruyu cevaplamak için: Kodun olumsuz bir yan etkisi olamaz:

• window.consoleconsoletanımlanmadıysa yanlış olarak değerlendirilecek
• console.log("Foo"), tanımlandığında mesajı konsola yazdırır (sayfanın console.logbir işlev dışı tarafından üzerine yazmaması koşuluyla ).

Bununla başa çıkmanın başka bir yolu, konsol nesnesini tanımlanmadığında 'saplamaktır', böylece konsola sahip olmayan bağlamlarda hata atılmaz.

if (!window.console) {
  var noOp = function(){}; // no-op function
  console = {
    log: noOp,
    warn: noOp,
    error: noOp
  }
}

fikrini anlıyorsunuz ... konsolun çeşitli uygulamalarında tanımlanmış birçok işlev vardır, böylece hepsini veya yalnızca kullandıklarınızı (örneğin yalnızca kullanırsanız console.logve hiç kullanmadıysanız console.profile, console.timevb.)

Bu benim için geliştirmede her aramanın önüne koşul eklemek veya kullanmamaktan daha iyi bir alternatiftir.

ayrıca bkz: JavaScript kodunuzda "console.log ()" çağrıları bırakmak kötü bir fikir mi?

UglifyJS2

Bu minifier kullanıyorsanız, şu drop_consoleseçenekleri ayarlayabilirsiniz :

Aramaları konsola atmak için true iletin. * Functions

Bu yüzden console.log, kod tabanının en zor kısmı için çağrıları bırakmanızı öneririm .

Küçültme, derleme sürecinizin bir parçasıysa, Google kapatma derleyicisiyle burada açıklandığı gibi, hata ayıklama kodunu çıkarmak için kullanabilirsiniz: Küçültme sırasında hata ayıklama JavaScript kodunu hariç tutun

if (DEBUG) {
  console.log("Won't be logged if compiled with --define='DEBUG=false'")
}

Gelişmiş optimizasyonlarla derlerseniz, bu kod ölü olarak tanımlanacak ve tamamen kaldırılacaktır.

Evet. console.log, desteği olmayan tarayıcılarda bir istisna atar (konsol nesnesi bulunmaz).

Genel olarak evet, üretim kodunuzdaki günlük mesajlarını ortaya çıkarmak iyi bir fikir değildir.

İdeal olarak, dağıtımdan önce bu tür günlük mesajlarını bir yapı betiği ile kaldırmanız gerekir; ancak çoğu (çoğu) insan (ben dahil) bir inşa süreci kullanmıyor.

İşte bu ikilemi çözmek için son zamanlarda kullandığım bazı kodların kısa bir parçası. consoleEski IE'de tanımlanmamış bir IE'nin neden olduğu hataları düzeltir ve "development_mode" durumunda günlük kaydını devre dışı bırakır.

// fn to add blank (noOp) function for all console methods
var addConsoleNoOp =  function (window) {
    var names = ["log", "debug", "info", "warn", "error",
        "assert", "dir", "dirxml", "group", "groupEnd", "time",
        "timeEnd", "count", "trace", "profile", "profileEnd"],
        i, l = names.length,
        noOp = function () {};
    window.console = {};
    for (i = 0; i < l; i = i + 1) {
        window.console[names[i]] = noOp;
    }
};

// call addConsoleNoOp() if console is undefined or if in production
if (!window.console || !window.development_mode) {
    this.addConsoleNoOp(window);
}

addConsoleNoOpSO'daki başka bir cevaptan yukarıdaki f'n'nin çoğunu aldığıma oldukça eminim , ancak şu anda bulamıyorum. Bulursam daha sonra bir referans ekleyeceğim.

düzenleme: Düşündüğüm gönderi değil, ama işte benzer bir yaklaşım: https://github.com/paulmillr/console-polyfill/blob/master/index.js

var AppLogger = (function () {
  var debug = false;
  var AppLogger = function (isDebug) {
    debug = isDebug;
  }
  AppLogger.conlog = function (data) {
    if (window.console && debug) {
        console.log(data);
    }
  }
  AppLogger.prototype = {
    conlog: function (data) {
        if (window.console && debug) {
            console.log(data);
        }
    }
  };
return AppLogger;
})();

Kullanım:

var debugMode=true;
var appLogger = new AppLogger(debugMode);
appLogger.conlog('test');

Evet, console.logjavascript hata ayıklama amacıyla kullanılması iyi bir uygulamadır , ancak üretim sunucusundan kaldırılması gerekir veya gerekirse dikkate alınması gereken bazı önemli noktalar ile üretim sunucusuna eklenebilir:

**var isDebugEnabled="Get boolean value from Configuration file to check whether debug is enabled or not".**
if (window.console && isDebugEnabled) {
    console.log("Debug Message");
}

Yukarıdaki kod bloğu, öncelikle konsolun mevcut tarayıcı için desteklenip desteklenmediğini ve hata ayıklamanın etkin olup olmadığını doğrulamak için günlük kaydı için her yerde kullanılmalıdır.

isDebugEnabled çevremize bağlı olarak doğru veya yanlış olarak ayarlanmalıdır.

TL; DR

Fikir: Nesnelerin günlüğe kaydedilmesi, bunların Çöp Toplanmasını engeller.

Detaylar

1. Nesneleri console.logiletirseniz, bu nesnelere DevTools konsolundan başvuru ile erişilebilir. Nesneyi günlüğe kaydederek, değiştirerek ve eski mesajların nesnenin daha sonraki değişikliklerini yansıttığını bularak kontrol edebilirsiniz.
2. Günlükler çok uzunsa, eski iletiler Chrome'da silinir.
3. Günlükler kısaysa eski mesajlar kaldırılmaz, bu mesajlar nesnelere atıfta bulunursa bu nesneler Çöp Toplanamaz.

Bu sadece bir fikir: 1. ve 2. noktaları kontrol ettim ama 3. değil.

Çözüm

İstemci tarafında sorun giderme veya diğer ihtiyaçlar için günlükleri tutmak istiyorsanız:

['log', 'warn', 'error'].forEach( (meth) => {
  const _meth = window.console[meth].bind(console);
  window.console[meth] = function(...args) { _meth(...args.map((arg) => '' + arg)) }
});

Temel olarak console.log işlevinin üzerine, kodun nerede çalıştırıldığını bilen bir işlevin üzerine yazıyorum. Böylece her zaman yaptığım gibi console.log'u kullanmaya devam edebilirim. Dev / qa modunda veya üretimde olduğumu otomatik olarak bilir. Onu zorlamanın bir yolu da var. İşte çalışan bir keman. http://jsfiddle.net/bsurela/Zneek/

Yığın taşması jsfiddle gönderen kişiler tarafından anlaşıldığı için snippet burada.

  log:function(obj)
{
    if(window.location.hostname === domainName)
    {
        if(window.myLogger.force === true)
        {
            window.myLogger.original.apply(this,arguments);
        }
    }else {
        window.myLogger.original.apply(this,arguments);
    }
},

Bunun oldukça eski bir soru olduğunu ve bir süredir çok fazla hareketlenmediğini biliyorum. Sadece benim için oldukça işe yarayan bulduğum çözümümü eklemek istedim.

    /**
     * Logger For Console Logging 
     */
    Global.loggingEnabled = true;
    Global.logMode = 'all';
    Global.log = (mode, string) => {    
        if(Global.loggingEnabled){
            switch(mode){
              case 'debug':
                  if(Global.logMode == 'debug' || Global.logMode == 'all'){
                    console.log('Debug: '+JSON.stringify(string));
                  }
                  break;
              case 'error':
                  if(Global.logMode == 'error' || Global.logMode == 'all'){
                    console.log('Error: '+JSON.stringify(string));
                  }       
                  break;
              case 'info':
                  if(Global.logMode == 'info' || Global.logMode == 'all'){
                    console.log('Info: '+JSON.stringify(string));
                  }
                  break;
            }
        }
    }

Daha sonra komut dosyalarımda genellikle bunun gibi bir işlev oluştururum veya bunu global bir komut dosyasında kullanılabilir hale getirebilirsiniz:

Something.fail = (message_string, data, error_type, function_name, line_number) => {
    try{

        if(error_type == undefined){
            error_type = 'error';
        }

        Global.showErrorMessage(message_string, true);
        Global.spinner(100, false);

        Global.log(error_type, function_name);
        Global.log(error_type, 'Line: '+line_number);
        Global.log(error_type, 'Error: '+data);

    }catch(error){
        if(is_global){
            Global.spinner(100, false);
            Global.log('error', 'Error: '+error);
            Global.log('error', 'Undefined Error...');
        }else{
            console.log('Error:'+error);
            console.log('Global Not Loaded!');
        }           
    }   
}

Ve sonra bunu console.log yerine şöyle kullanıyorum:

try{
 // To Do Somehting
 Something.fail('Debug Something', data, 'debug', 'myFunc()', new Error().lineNumber);
}catch(error){
 Something.fail('Something Failed', error, 'error', 'myFunc()', new Error().lineNumber);
}

İş akışı gibi doğru araçları kullanılarak yapılırsa parcel/ webpackile çünkü o zaman, artık bir baş ağrısı var productioninşa console.logbırakılıyor. Daha önce birlikte Hatta birkaç yıl Gulp/ Grunto sıra otomatik yapılmamış olabilir.

Gibi modern çerçeveler çoğu Angular, React, Svelte, Vue.jsout-of-the-box o kurulum ile birlikte gelir. Doğru yapı, yani dağıtmak olarak Temel olarak, sürece, bir şey yapmak zorunda değilsiniz productionkimse, developmenthala sahip olacaktır console.log.