Question

我尝试为我的TypeScript / Angular 2 App制作日志服务。不幸的是，如果我调用console.log，行号是错误的。即使我尝试return console.log()。

这是我的代码：

LoggerService.ts

export class LoggerService {    
  log(message) {
    // Server-side logging
    // [...]
    if (clientSideLogging) return console.log(message);
  }
}

SomewhereElse.ts

this.logger.log('hello world');

- ＆GT;显示LoggerService.ts的行号而不是源

Answer 1

您可以使用.bind() method将window.console绑定到自定义日志方法，然后返回该函数，以便在调用代码时在原始范围内执行代码。

这样做时，在调用记录器服务的log方法时将保留行号：

class LoggerService {
  public log = console.log.bind(window.console);
}

// ...or annotated:
class LoggerService {
  public log: (message) => void = console.log.bind(window.console);
}

然后，如果要添加条件语句：

class LoggerService {
  public log = clientSideLogging ? console.log.bind(window.console) : () => {};
}

以下是an example，其中包含已编译的TypeScript代码。

除了上面提到的单行解决方案之外，如果您想在log方法中实现其他逻辑，那么您可以使用getter来返回并调用console.log绑定到window.console的函数。

class LoggerService {
  public get log (): Function {
    // Implemnt server-side logging

    return console.log.bind(window.console);
  }
}

正如您所知，返回console.log函数非常重要，因为在直接在另一个范围内调用行号时，它不会保留行号。

然后，如果要添加条件语句：

class LoggerService {
  public get log (): Function {
    const log = console.log.bind(window.console);

    // Implemnt server-side logging

    return clientSideLogging ? log : () => {};
  }
}

以下是an example，其中包含已编译的TypeScript代码。

Answer 2

您可以使用.trace()代替.log()。

this.logger.trace('hello world');

这将为您提供原始行号的堆栈跟踪。

https://developer.mozilla.org/en-US/docs/Web/API/Console/trace

在TypeScript / Angular 2中的wrapper函数中保存console.log（）行号

2 个答案: