使用Augury调试Angular 2应用

介绍 ( Introduction )

Augury is a Google Chrome extension for debugging Angular 2 applications, just like Batarang is for debugging Angular 1.* Apps, and is accessible via the Chrome Dev Tools.

Augury是用于调试Angular 2应用程序的Google Chrome扩展程序，就像Batarang用于调试Angular 1. *应用程序一样，可通过Chrome开发工具进行访问。

Augury helps us debug our applications by letting us see Component trees, Router Trees and Component Class properties:

Augury通过让我们查看组件树，路由器树和组件类属性来帮助我们调试应用程序：

特色 ( Features of Augury )

组件树 (Component Tree)

Angular 2 Apps are built with the component structure. It's usually components within components, which eventually form a Component tree. Augury enables you to visualize and inspect the component tree, while accessing the various properties of these components, all within the Chrome Dev Tools.

In the kitchen sink example provided by augury, we can see the component tree. Selecting a component withing the tree highlights and selects the componet's view/template within the browser (the same way dev tools'

inpect element usually works).

Angular 2 Apps是使用组件结构构建的。 它通常是组件内的组件，最终形成一个组件树。 通过Augury，您可以在Chrome开发工具中访问所有组件的各种属性，而可视化并检查它们。 inpect element通常相同的方式）。

You can also edit some of these properties in the Chrome Dev Tools and see their effect in your component view.

您还可以在Chrome开发工具中编辑其中一些属性，并在组件视图中查看其效果。

An injector graph is also provided for components that gives a visual representation of the component hierarchy.

还为组件提供了进样器图，以可视方式表示组件层次。

路由器树 (Router Tree)

Augury can give you a tree view of all the routes in your application. You can see which routes come from which parts of your application.

Selecting the route in the router tree, show's more info about the route.

Augury可以为您提供应用程序中所有路线的树状视图。 您可以查看哪些路由来自应用程序的哪些部分。

安装与设置 ( Installation and Set Up )

Install Augury by clicking on the install button in the website. You have to be using Chrome to add it as a Chrome Extensions. You should see a tab for Augury when you open your Chrome Dev Tools.

通过单击网站上的安装按钮来安装Augury 。 您必须使用Chrome才能将其添加为Chrome扩展程序。 当您打开Chrome开发工具时，应该会看到Augury标签。

I've set up an Angular Template app, with webpack based on webpack introduction instructions from the Angular Site.

我已经根据Angular网站上的webpack介绍说明，使用webpack设置了Angular Template应用程序。

You can find the Angular Webpack repo here. Instructions to get started with the repo are:

您可以在此处找到Angular Webpack仓库 。 回购入门的说明如下：

# clone the repo
git clone git@github.com:gangachris/ng2-webpack.git

# go into the directory
cd ng2-webpack

# install dependencies
npm install

# start everything
npm start

After webpack builds, the application should be running in localhost:8080, and should live reload when you edit the code.

在构建webpack之后，该应用程序应在localhost:8080运行，并在编辑代码时实时重新加载。

I've annotated key parts of Augury that we'll be looking into:

我已经注释了Augury的关键部分，我们将对其进行研究：

• Left side: Component tree
  左侧：组件树
• Right side: Component properties
  右侧：组件属性

Here is something interesting, on the right pane, where the properties of the AppComponent are displayed, there's a link at the top written view source. Click it, and you will be taken to where the source code of the component is.

这是有趣的事情，在右窗格中显示AppComponent的属性的地方，在顶部书面视图源处有一个链接。 单击它，您将被带到该组件的源代码所在的位置 。

Awesome right?

太好了吧？

行动中的预兆 ( Augury in Action )

To see augury in action, let's make the big title on our page bound to a property in the Component Class.

要查看实际情况，让我们将页面上的大标题绑定到Component Class中的一个属性。

src/app/app.component.ts

src / app / app.component.ts

import {
     Component } from '@angular/core';

@Component({
    
  selector: 'my-app'