如何调试Angular 6 App？

Question

目前，我在一个angular 6应用上遇到了问题。我为它使用了Fuse框架模板。目前，当我尝试在应用程序中使用MatSnackBar时，我遇到了麻烦。只要我将MatSnackBar添加到组件的构造函数中，就会在浏览器的JS控制台中得到一个错误。

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

  }

下面是错误消息：

ERROR Error: "[object Object]"

如何获取更多信息哪里出了问题？

Answer 1

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

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

imports: [ ... MatSnackBarModule ...

没有它，我会得到一个错误，就像你一样

要进行调试，如果您有权访问导入的源代码(并使用vscode)，请遵循this说明，在导入的类的构造函数上放置一个断点。

您还可以放置一个调试器并打开开发人员工具(chrome中的F12)：

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

希望它能帮上忙！

Answer 2

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

chrome plugin for debug AngularJS