在生产中禁用 console.log()

Question

我已运行以下命令来禁用我的角度应用程序中生产环境的控制台日志。下面的代码在 chrome 中按预期工作，但是，它仍然在 IE 11 中显示日志。

main.ts

if (environment.production) {
  enableProdMode();
if(window){
  window.console.log=function(){};
 }
}

这是一个 Polyfill 问题吗？我在网上找不到任何相关信息。

编辑

这个问题可能看起来很相似，但没有解决我的问题，即为什么将控制台日志功能覆盖为空白方法在chrome中有效，但在IE 11中无效。

Answer 1

问题已得到解答，答案已被接受，但我想向您展示一种在生产中禁用/关闭 console.log 的更好方法。 在 src/envirenmonts 下添加包含以下内容的 environment.ts：

export const environment = {
  production: false,

  mode: 'Dev'
} 

在 main.ts 中导入 envirenmont const:

import './polyfills';
...
import { environment } from './environments/environment';

现在添加以下代码片段：

..

if (environment.production) {
      window.console.log = () => { }
}

platformBrowserDynamic().bootstrapModule(AppModule).then(ref => {
  ...
}).catch(err => console.error(err)); 

要尝试此操作，请在 app.component.ts 的构造函数中添加 console.log：

...
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  ...
  constructor() {    
    console.log('How to switch off logging in Production?')
  }
}

将 environment.product 切换为 true/false 以查看结果 这是一个工作的 stackblitz

Answer 2

解决方案是将polyfill 添加到您的polyfill.ts 文件中

if(!window.console) {
 var console = {
  log : function(){},
  warn : function(){},
  error : function(){},
  time : function(){},
  timeEnd : function(){}
 }
}

Answer 3

我在Utility.ts类中添加了自定义日志功能，如下

    public static log(strValue: string) {
    if (CoreService._env !== 'prod') {
      console.log(strValue);
    }
  }

CoreService 中定义的 _env 变量并在 app 内赋值。组件如下

this.coreService.env = environment.env;

在environment.ts文件中定义env如下

export const environment = { env: 'dev'} // for production it will be 'prod'

我的组件正在使用

Utility.log("Print the value");

这样，您可以轻松防止生产日志。

Answer 4

我为这样的问题创建了一个小库：deblog。您不必重写控制台对象方法。

您可以创建控制台对象的包装器并定义适当的日志记录方法，您可以根据需要进行配置并在生产中禁用它们：

例如，你可以这样做：

import { createDeblog } from "deblog";

const configuration = {
  logs: [
    {
      name: "foo",
      level: "debug",
      tag: "FOO -",
      enabled: true,  // <- THIS can be set using a PRODUCTION_LOG variable set to "false"
    },
    {
      name: "bar",
      level: "log",
      tag: `[${new Date(Date.now()).toLocaleTimeString()}] BAR -`,
    },
  ],
};

let dlog = createDeblog(configuration);

dlog.disableAllBut("bar"); // Silencing all logs but bar

dlog.foo("1 Connection Error"); // Will not be logged
dlog.bar("I'm here!");
dlog.foo("2 Connection Error"); // Will not be logged
dlog.bar("I just need bar logs here");

dlog.restoreAll();

dlog.bar("4 Connection Error"); // Will be logged

Answer 5

此解决方案适用于所有 Angualr、ReactJS、VueJS 和 Vanilla JavaScript 等。

你可以通过这种方式

enable

/

disable

！

console.log("Before disabled logs");

const consoleLog = false

if(!consoleLog) {
  console.log = function() {} 
}

console.log("After disabled logs #1");
console.log("After disabled logs #2");

Answer 6

    import { Injectable } from '@angular/core';
    import { environment } from 'src/environments/environment';
     
    @Injectable({ providedIn: 'root' }) 
    
    export class ConsoleToggleService { 
       constructor() {}
    
       disableConsoleInProduction(): void { 
         if (environment.production) {
           console.warn(`🚨 Console output is disabled on production!`);
           console.log = function (): void { };
           console.debug = function (): void { };
           console.warn = function (): void { };
           console.info = function (): void { };
         }
       }
    }

最后，在您的AppComponent中，注入ConsoleToggleService并在构造函数中调用disableConsoleInProduction()函数，如下所示：

export class AppComponent {
  constructor(private consoleToggleService: ConsoleToggleService) {
     this.consoleToggleService.disableConsoleInProduction();
  }
}