क्या मुझे उत्पादन कोड से कंसोल.लॉग हटाना चाहिए?

Question 1

मेरे पास वर्तमान में मेरे कोड में हर जगह यह JS कथन है:

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

मुझे आश्चर्य है कि अगर यह महंगा है, या उत्पादन में कोई नकारात्मक दुष्प्रभाव है।

क्या मैं क्लाइंट-साइड लॉगिंग को छोड़ने के लिए स्वतंत्र हूं या इसे जाना चाहिए?

संपादित करें: अंत में, मुझे लगता है कि सबसे अच्छा तर्क I (और किसी और का?) के साथ आ सकता है कि सर्वर और ग्राहक के बीच स्थानांतरित किए गए अतिरिक्त डेटा का संभवतः गैर-नगण्य मात्रा है जो लॉगिंग संदेशों को छोड़ कर अंदर है। उत्पादन कोड को पूरी तरह से अनुकूलित किया जाना है, क्लाइंट को भेजे जा रहे जावास्क्रिप्ट के आकार को कम करने के लिए लॉगिंग को हटाना होगा।

Question 2

आपको उत्पादन पृष्ठ पर विकास उपकरण नहीं जोड़ना चाहिए ।

अन्य प्रश्न का उत्तर देने के लिए: कोड का नकारात्मक पक्ष प्रभाव नहीं हो सकता है:

window.consoleconsoleपरिभाषित नहीं होने पर असत्य का मूल्यांकन करेगा
console.log("Foo")जब यह परिभाषित किया जाता है तो संदेश कंसोल को प्रिंट करेगा (बशर्ते कि पृष्ठ console.logकिसी गैर-फ़ंक्शन द्वारा अधिलेखित न हो )।

Question 3

इससे निपटने का एक और तरीका कंसोल ऑब्जेक्ट को 'स्टब' करना है जब इसे परिभाषित नहीं किया जाता है, इसलिए कोई त्रुटि नहीं है जो संदर्भों में फेंक दी गई है, जिसमें कंसोल नहीं है अर्थात

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

आपको यह विचार मिलता है ... कंसोल के विभिन्न कार्यान्वयन पर बहुत सारे फ़ंक्शन परिभाषित हैं, इसलिए आप उन सभी या बस उन का उपयोग कर सकते हैं जिन्हें आप उपयोग करते हैं (जैसे यदि आप केवल कभी उपयोग करते हैं console.logऔर कभी उपयोग नहीं किए जाते हैं console.profile, console.timeआदि ...)

यह मेरे लिए हर कॉल के सामने सशर्त जोड़ने, या उनका उपयोग न करने की तुलना में विकास का एक बेहतर विकल्प है।

इसे भी देखें: क्या आपके प्रोडक्टन जावास्क्रिप्ट कोड में "कंसोल.लॉग ()" कॉल को छोड़ना एक बुरा विचार है?

Question 4

UglifyJS2

यदि आप इस मिनिफायर का उपयोग कर रहे हैं, तो आप drop_consoleविकल्प सेट कर सकते हैं :

कंसोल पर कॉल छोड़ने के लिए सही पास करें। * फ़ंक्शंस

इसलिए मैं console.logकॉल छोड़ने का सुझाव दूंगा क्योंकि वे कोडबेस के सबसे पेचीदा हिस्से के लिए हैं।

Question 5

यदि खनन आपकी निर्माण प्रक्रिया का हिस्सा है, तो आप इसका उपयोग डिबग कोड को हटाने के लिए कर सकते हैं, जैसा कि Google क्लोजर कंपाइलर के साथ यहां बताया गया है: minification के दौरान डीबग जावास्क्रिप्ट कोड को छोड़ दें

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

यदि आप उन्नत अनुकूलन के साथ संकलन करते हैं, तो इस कोड को मृत के रूप में भी पहचाना जाएगा और पूरी तरह से हटा दिया जाएगा

Question 6

हाँ। कंसोल.लॉग उन ब्राउज़रों में एक अपवाद फेंक देगा जिनके पास इसके लिए समर्थन नहीं है (कंसोल ऑब्जेक्ट नहीं मिलेगा)।

Question 7

आम तौर पर हां, अपने उत्पादन कोड में लॉग संदेशों को उजागर करने के लिए यह एक महान विचार नहीं है।

आदर्श रूप से, आपको तैनाती से पहले एक निर्माण स्क्रिप्ट के साथ ऐसे लॉग संदेशों को हटा देना चाहिए; लेकिन कई (अधिकांश) लोग बिल्ड प्रक्रिया (मेरे सहित) का उपयोग नहीं करते हैं।

इस दुविधा को हल करने के लिए मैं हाल ही में उपयोग किए गए कुछ कोड का एक छोटा स्निपेट प्रस्तुत कर रहा हूं। यह consoleपुराने IE में एक अपरिभाषित की वजह से त्रुटियों को ठीक करता है , साथ ही साथ "विकास_ मोड" में लॉगिंग को अक्षम करने पर।

// 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 पर एक और जवाब से उपरोक्त बहुत कुछ लिया है , लेकिन अभी नहीं मिल सकता। अगर मुझे यह मिल जाए तो मैं बाद में एक संदर्भ जोड़ूंगा।

संपादित करें: वह पोस्ट नहीं, जिसके बारे में मैं सोच रहा था, लेकिन यहां एक समान दृष्टिकोण है: https://github.com/paulmillr/console-polyfill/blob/master/index.js

Question 8

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;
})();

उपयोग:

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

Question 9

हां, console.logजावास्क्रिप्ट डिबगिंग उद्देश्य के लिए उपयोग करने के लिए इसका अच्छा अभ्यास है , लेकिन इसे उत्पादन सर्वर से निकालने की आवश्यकता है या यदि आवश्यक हो तो कुछ महत्वपूर्ण बिंदुओं के साथ उत्पादन सर्वर पर जोड़ा जा सकता है:

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

कोड वेरिफिकेशन के लिए हर जगह उपर ब्लॉक ब्लॉक का इस्तेमाल करना होता है ताकि पहले यह पता लगाया जा सके कि कंसोल वर्तमान ब्राउजर के लिए सपोर्टेड है या नहीं और डिबग इनेबल है या नहीं।

isDebugEnabled हमारे पर्यावरण के आधार पर सही या गलत के रूप में सेट किया जाना चाहिए।

Question 10

टी एल; डॉ

विचार: लॉगिंग ऑब्जेक्ट उन्हें गारबेज कलेक्ट होने से रोकता है।

विवरण

यदि आप ऑब्जेक्ट पास करते हैं, console.logतो ये ऑब्जेक्ट DevTools के कंसोल से संदर्भ द्वारा पहुंच योग्य हैं। आप इसे ऑब्जेक्ट लॉग करके चेक कर सकते हैं, इसे म्यूट कर सकते हैं और पा सकते हैं कि पुराने संदेश ऑब्जेक्ट के बाद के परिवर्तन को दर्शाते हैं।
यदि लॉग बहुत लंबे हैं तो पुराने संदेश क्रोम में डिलीट हो जाते हैं।
यदि लॉग कम हैं, तो पुराने संदेश हटाए नहीं जाते हैं, यदि ये संदेश ऑब्जेक्ट्स को संदर्भित करते हैं तो ये ऑब्जेक्ट कचरा एकत्रित नहीं होते हैं।

यह सिर्फ एक विचार है: मैंने अंक 1 और 2 की जाँच की लेकिन 3 नहीं।

समाधान

यदि आप क्लाइंट-साइड समस्या निवारण या अन्य आवश्यकताओं के लिए लॉग रखना चाहते हैं तो:

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

Question 11

मैं मूल रूप से कंसोल.लॉग फ़ंक्शन को एक के साथ अधिलेखित करता हूं, जिसके पास यह पता है कि कोड कहां चलाया जा रहा है। इस प्रकार मैं कंसोल का उपयोग करना जारी रख सकता हूं। जैसा कि मैं हमेशा करता हूं। यह स्वचालित रूप से जानता है कि मैं देव / क्यूए मोड में या उत्पादन में हूं। इसे मजबूर करने का एक तरीका भी है। यहाँ एक काम कर रहे बेला है। http://jsfiddle.net/bsurela/Zneek/

यहाँ स्निपेट है क्योंकि स्टैक ओवरफ्लो लोगों द्वारा jsfiddle को पोस्ट करने से भयभीत है

  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);
    }
},

Question 12

मुझे पता है कि यह काफी पुराना सवाल है और कुछ ही समय में इसकी कोई गतिविधि नहीं हुई है। मैं सिर्फ अपना समाधान जोड़ना चाहता था जो कि मेरे साथ आया था जो मेरे लिए काफी अच्छा काम करता है।

    /**
     * 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;
            }
        }
    }

फिर मैं आम तौर पर इस तरह से अपनी स्क्रिप्ट में एक फ़ंक्शन बनाता हूं या आप इसे एक वैश्विक स्क्रिप्ट में उपलब्ध करा सकते हैं:

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!');
        }           
    }   
}

और फिर मैं सिर्फ सांत्वना के बजाय इसका उपयोग करता हूं। इस तरह:

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);
}

Question 13

यदि वर्कफ़्लो सही उपकरण का उपयोग करके किया जाता है जैसे parcel/ webpackतो यह अब सिरदर्द नहीं है, क्योंकि productionबिल्ड के साथ console.logगिराया जा रहा है। कुछ साल पहले भी Gulp/ साथ ही Gruntइसे स्वचालित किया जा सकता था।

आधुनिक चौखटे जैसे में से कई Angular, React, Svelte, Vue.jsआउट-ऑफ-द-बॉक्स कि सेटअप के साथ आते हैं। मूल रूप से, आपको कुछ भी करने की ज़रूरत नहीं है, जब तक आप सही बिल्ड को तैनात नहीं करते हैं, यानी productionएक, developmentजो अभी भी नहीं है console.log।