如何调试 Angular 6 应用程序？答案

【问题标题】：How can I debug an Angular 6 App?如何调试 Angular 6 应用程序？
【发布时间】：2018-10-26 10:49:39
【问题描述】：

目前我有一个 Angular 6 应用程序的问题。我使用Fuse 骨架模板。目前，当我尝试在应用程序中使用 MatSnackBar 时，我遇到了麻烦。一旦我将 MatSnackBar 添加到组件的构造函数中，我就会在浏览器的 JS 控制台中收到错误消息。

  constructor(
    private formBuilder: FormBuilder,
    private location: Location,
    public snackBar: MatSnackBar
  )
  {

  }

这是错误消息：

ERROR Error: "[object Object]"

我怎样才能获得更多信息什么是错的？

【问题讨论】：

【解决方案1】：

google chrome 有一个开源插件，所以你可以使用 AngularJS Batarang

【讨论】：

【解决方案2】：

您需要在 app.module.ts 数组中导入 MatSnackBarModule。

import { MatSnackBarModule } from '@angular/material';

imports: [ ... MatSnackBarModule ...

没有它，我和你一样会报错

要调试，如果您可以访问导入的源代码（并使用 vscode），请按照this 的说明，在导入的类的构造函数上放置一个断点。

您也可以放置一个调试器并打开开发者工具（chrome 中的 F12）：

foo() { 
   debugger; 
   console.log('footest');
}

希望对你有帮助！

【讨论】：