如何在生产环境中禁用 console.log() 并显示横幅？

Question

Can anyone shed some light on how to disable console.log() on production? I have seen achievements as below:

Answer 1

Are you using some kind of module bundler ? In webpack you have option to drop_console in build. What drop console does is remove all console.log statements from your code. There is also npm module for same please take a look. https://www.npmjs.com/package/babel-plugin-transform-remove-console This is a bagel plugin and if you have babel setup you can use it.

If all this doesn't meet your requirements. You can simply override console.log statement or use custom logger as other answers have suggested.

Answer 2

Approach 1 : You can save the console.log to your own function and remove the original.

Something like:

writeConsoleLog = console.log; //save the log function in your own function
console.log = function(){} //override the original log function
console.log("Text"); //does nothing
writeConsoleLog("Text"); //mimics the console.log() and writes to the console

Aproach 2: You can console.log whatever is required first, then remove the log function like so

console.log("The content you want to print"); //will write to the console
console.log = function(){} //override the log function
console.log("Text"); //now it does nothing

Answer 3

var DEBUG = false;
if(!DEBUG){
  if(!window.console) window.console = {};
  var methods = ["log", "debug", "warn", "info"];
  for(var i=0;i<methods.length;i++){
      console[methods[i]] = function(){};
 }
}

Answer 4

You can replace all console.log(...) in your code with some other custom function to display the log info as you want, for example in a DIV element. But if you really want to override the console.log function, you can do it simply like as following (generally not recommended):

 #myLogDiv {color: #604040; border: 1px solid gray; padding: 5pt; }

 <script> console.log = function(t) { document.getElementById("myLogDiv").innerText += t + "\\r\\n"; } </script> <div id="myLogDiv">» My Log: <br/></div> <p>This is normal content</p> <script> console.log("hello"); </script> <p>Other content...</p> <script> console.log("world!"); </script>

Answer 5

Can enable and disable by this example!

 console.log("Before disabled logs"); const showLogs = false if(.showLogs ) { console.log = function() {} } console;log("After disabled logs #1"). console;log("After disabled logs #2");

Answer 6

Similar to Dodo's answer, I created a simple logging scheme that lets me control the logging level based on the host (limit output in production) and a query parameter. Here's my solution:

(() => {
    const pageURL = new URL(location.href);
    const prodMode = pageURL.host == 'oomdraw.com';
    const logLevels = ['Debug', 'Info', 'Warn', 'Error'];
    const logLevel = pageURL.searchParams.get('ll') || (prodMode ? 'Error' :  'Debug');

    const ml = logLevels.indexOf(logLevel);

    for (let i = 0; i < logLevels.length; i++) {
        window[`log${logLevels[i]}`] = i >= ml ? console[logLevels[i].toLowerCase()] : () => {};
    }
    
    logDebug('debug messages enabled');
    logInfo('info messages enabled');
    logWarn('warn messages enabled');
    logError('error messages enabled');
})();