如何在 Angular 8 中使用 console.log？

Question

以前我的console.log在Angular 6中查看浏览器中变量的内容

      console.log('CONSOLOG: M:paginateVar & O: this.var : ', this.var);

...我对此很满意，但是现在我开始使用 Angular 8 并且出现此错误（当我启动 npm 时）：

No type errors found
Version: typescript 3.4.5
Time: 2104ms
× ｢wdm｣:    1029 modules

ERROR in ./src/main/webapp/app/home/home.component.ts
Module Error (from ./node_modules/eslint-loader/dist/cjs.js):

D:\JHipster\spingular\src\main\webapp\app\home\home.component.ts
105:7  error  Unexpected console statement  no-console

✖ 1 problem (1 error, 0 warnings)

i ｢wdm｣: Failed to compile.

如何在浏览器中查看变量的内容？

TSLINT：

{
  "rulesDirectory": ["node_modules/codelyzer"],
  "rules": {
    "no-console": [false, "debug", "info", "time", "timeEnd", "trace" ],
    "directive-selector": [true, "attribute", "jhi", "camelCase"],
    "component-selector": [true, "element", "jhi", "kebab-case"],
    "no-inputs-metadata-property": true,
    "no-outputs-metadata-property": true,
    "no-host-metadata-property": true,
    "no-input-rename": true,
    "no-output-rename": true,
    "use-lifecycle-interface": true,
    "use-pipe-transform-interface": false,
    "component-class-suffix": true,
    "directive-class-suffix": true
   }
}

谢谢你的帮助

Answer 1

no-console是由TSLint及其规则引起的：

规则：无控制台

禁止使用指定的控制台方法。

检查您的tslint.json ：

"no-console": [
  true,
  "debug",
  "info",
  "time",
  "timeEnd",
  "trace"
],

只需将true更改为false 。

Answer 2

这是 Node.js 中的 ESLint 规则。

https://eslint.org/docs/rules/no-console

它被禁用的原因：

控制台用于向用户提供 output 信息，因此不严格用于调试目的。 如果您正在为 Node.js 开发，那么您很可能不希望启用此规则。

您可能想考虑一个记录器： https://github.com/code-chunks/angular2-logger

但是，如果您真的只想允许 console.log 您可以编辑规则以设置：

“无控制台”：“关闭”，

Answer 3

在 yours.TS 文件中时，您可以使用 console.log function。

例子：

 int id = 1 ; // id is declared variable 
 console.log ("id ", this.id ); // function called 

在运行项目时，检查元素控制台，你会看到“id 1”将被打印出来