调试 Angular 2 应用程序

2019-01-10 08:00:00 · 飞浪

本教程将全面概述使用 Google Chrome 开发者工具调试 Angular 2 应用程序的各种方法。

介绍

尽管 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 管道

管道在 Angular 2 中用于以特定方式表示数据。它们与 Angular 1 的过滤器非常相似。

JSON 管道可以通过将模型表示为 JSON 对象来帮助您进行调试。只需将 | 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...');
    

结论

就这些！希望本指南能为您节省一些研究选项的时间。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文