介绍
尽管 Angular 2 还很年轻，但您仍可以使用大量调试技术和方法。
本指南全面概述了调试 Angular 2 应用程序的各种方法。为了充分利用 Angular 2 调试，建议您使用Google Chrome，因为此处介绍的大多数示例都依赖于Chrome 开发者工具
启用和禁用调试
Angular 2 应用程序默认启用开发模式。开发模式允许在控制台中显示错误并使用断点。当您在调试模式下打开控制台时，通常会看到以下消息弹出：
Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode
在部署应用程序并将其放在实时服务器上之前，请确保禁用开发模式。为此，您需要在引导应用程序的文件中导入该函数：
//main.ts
import { enableProdMode } from '@angular/core';
enableProdMode();
bootstrap(AppComponent, [
//providers, etc
]);
在深入研究本指南之前，请确保您的应用程序已禁用生产模式，以便您可以访问下面描述的所有方法。
安慰
如果您喜欢复古风格，有一种简洁的方法可以从控制台调试 Angular 2 应用程序。首先，您可以使用Chrome 开发者工具（简称为 Devtools）通过 $0 获取所选元素的引用。
有了 DOM 元素的引用，你就可以检查它所在组件的范围。你可以使用 ng.probe() 并将 DOM 元素作为参数来做到这一点：
> ng.probe($0)
正如您所见，ng.probe($0) 可以访问组件本身的范围并直接从控制台操作其各种属性。**。您可以继续探索组件的模型并在其实例中更改内容：
> ng.probe($0).componentInstance
但是，这些更改并未反映在 UI 中。为什么？因为您是通过编程方式编辑组件，而不是直接通过 DOM 进行编辑，所以 Angular 不会检测模型中的更改。如果您来自 Angular 1，您可能已经知道，您可以通过创建$digest事件来应用更改，该事件将检查应用程序中所有观察者中的更改。
然而，在 Angular 2 中，每个组件都有自己的范围，因此您必须将更改应用于组件的范围本身。
ng.probe($0)._debugInfo._view.changeDetectorRef.detectChanges()
调试器
启用源映射将使您看到应用程序的 TypeScript 代码而不是转译的 JavaScript 代码，从而更轻松地逐行调试代码。
要启用源映射，请编辑 tsconfig.json
tscofig.json
{
//...
"compilerOptions": {
"sourceMap": true
}
//...
}
现在，在您的源代码中，无论您将调试器语句放在哪里，您都将能够在调试器中看到 TypeScript 代码，而不是转译后的 JavaScript：
search(term: string) {
this.searchSubject.next(term);
debugger; //debug here!
}
当您使用它时，调试器将暂停应用程序中的代码并让您检查其状态。
JSON 管道
<p> I can see the whole model here! :</p>
{{hero | json}}
现在，您可以在与模型交互时实时看到模型的所有属性发生变化。
占卜
Angular Augury是让应用程序调试过程更加直观的好方法。您可以将其作为Chrome 扩展程序获取。
使用 Augury，您可以直观地遍历组件树并查看每个组件的提供程序、指令等。您还可以看到不同的提供程序是如何注入到组件中的。
日志记录
记录器是构造应用程序中的错误并提供更详细的错误报告的好方法。
截至撰写本指南时，Angular 2 还没有与 Angular 1 的$log服务相当的服务。但是，有两个软件包提供类似的功能 - angular2-log和angular2-logger。在本指南中，我们将使用angular2-logger，因为它开发得更完善、更稳定。
安装记录器
首先，我们需要安装该软件包。在项目的根目录中打开终端：
$ npm install --save angular2-logger
然后，在 Angular 2 的 bootstrap() 函数所在的文件中导入 Logger，并将其作为参数放在函数中。这会将 Logger 注入到顶层，并使该服务在整个应用程序中可用。
主要内容
import { Logger } from "angular2-logger/core";
bootstrap(AppComponent, [Logger]);
最后，在 index.html 中包含该脚本。确保将其包含在 SystemJS 的配置下，因为该包依赖它。
索引.html
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<!-- 3. Import logger -->
<script src="node_modules/angular2-logger/bundles/angular2-logger.js"></script>
使用记录器
使用记录器相当容易。每当您在应用程序中选择使用记录器时，您需要做两件事：
1. 导入
import { Logger } from "angular2-logger/core";
2.在组件/服务/指令的构造函数中添加
constructor(private _logger:Logger) {
//
}
现在您可以通过 this._logger 来使用该记录器：
this._logger.error('This is a priority level 1 error message...');
this._logger.warn('This is a priority level 2 warning message...');
结论
就这些！希望本指南能为您节省一些研究选项的时间。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
