javascript - console.log 仅在开发模式 Angular 2

Question

我在 Angular 2 应用程序 中有 console.log 消息。我想在 dev 中有 console.log 而不是在 production 中所以我创建了 Logger service 如下:

logger.service.ts

import { Injectable } from '@angular/core';
import { environment } from '../../../environments/environment';

@Injectable()
export class LoggerService {
  log(msg): void {
    if (!environment.production) {
      console.log(msg);
    }
  }
  error(msg): void {
    console.error(msg);
  }
  warn(msg, options): void {
    if (!environment.production) {
      if (options) console.warn(msg, options);
      else console.warn(msg);
    }
  }
} 

app.component.ts

import { Component, NgModule, OnInit } from '@angular/core';
import { environment } from '../environments/environment';   
import { LoggerService } from './shared/services/logger.service';

@Component({
  selector: 'web-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {    
  constructor(private _logger: LoggerService) {
    _logger.log("This is my test logger !!");
  }   

}

我对这种方法有疑问:

• 在 Dev 中，所有消息都从 logger.service.ts 文件中记录下来，这是正确的，但它使得调试很难找到实际的记录位置(文件，行号)。 [在我的例子中，我有 logger.service.ts 文件，但在 console 中它显示另一个文件名]

  

请问有什么建议吗？

Answer 1

这种方法只是增加了一个额外的控制台对象延迟层，你需要在每个组件中注入(inject)记录器服务并使调试更加困难，但你可以通过更改日志，错误，温暖属性和卡住对象，使其变得不可更改

考虑一下

main.ts

if (environment.production) {
  enableProdMode();

  let disFunc = () => 'console has been disabled in production mode';

  console.log = disFunc
  console.error = disFunc
  console.warn = disFunc

  Object.freeze(console);

}

这样你就可以正常使用控制台对象了。