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

Question

有人可以解释一下如何在生产环境中禁用console.log()吗？我看到以下成果：



。

- Haifeng Zhang

---

我认为你可以简单地覆盖console.log。不过，也许最好使用自己的日志函数并改变它的行为。 - apple apple

谢谢大家，如何同时禁用console.log并打印横幅？ - Haifeng Zhang

停止在您的代码中使用 console.log，请用您自己的日志函数替换它。 - Ry-

你为什么要禁用 console.log？仅打印横幅不足以满足需求吗？ - Bergi

Answer 1

您正在使用某种模块打包工具吗？ 在webpack中，您可以选择在构建时删除控制台（drop_console）。删除控制台会从代码中移除所有console.log语句。此外，也有一个npm模块提供相同的功能，请看一下：https://www.npmjs.com/package/babel-plugin-transform-remove-console 这是一个babel插件，如果您已经安装了babel，您可以使用它。

如果所有这些都不符合您的要求，您可以简单地覆盖console.log语句或像其他答案建议的那样使用自定义记录器。

- Shubham Gupta

Answer 2

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

- Dodong Advices

---

我喜欢这种方法，但是像这样修补全局函数通常是一个坏主意，它可能会在以后导致非常难以找到的错误。我做了类似的事情，但创建了自己的日志记录函数，我将它们作为另一个答案添加在下面。 - Scott Means

Answer 3

方法一：您可以将console.log保存到自己的函数中并删除原始函数。

类似于：

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

方法2：您可以首先使用console.log输出所需内容，然后像下面这样删除日志函数

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

- Jones Joseph

Answer 4

与Dodo的答案类似，我创建了一个简单的日志记录方案，让我可以根据主机（在生产中限制输出）和查询参数来控制日志记录级别。这是我的解决方案：

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

- Scott Means

Answer 5

您可以将代码中的所有console.log(...)替换为其他自定义函数，以按照您想要的方式显示日志信息，例如在DIV元素中。 但是，如果您真的想要覆盖console.log函数，您可以像以下简单地执行（通常不建议）：

#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>

- S.Serpooshan

Answer 6

可以通过这个例子来启用和禁用！

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

- GMKHussain