歡迎使用Augury

In this section you will learn about what Augury is and the features that are available. Later lessons in this guide will go into more detail, with each lesson that will have an accompanying demo Angular application.

在這個(gè)章節(jié)您將了解什么事Augury及其功能。本向?qū)е械钠溆嗾鹿?jié)將介紹更詳細(xì)的細(xì)節(jié)。并且每一個(gè)章節(jié)都有一個(gè)完成的Angular應(yīng)用案例。

Augury is an application inspection tool for Angular that runs in the Web browser. It runs as a Chrome browser extension for the Developer Tools (DevTools) panel, aiding in analysis and debugging during development.

Augury 是一個(gè)瀏覽器上的Angular審查工具。它是Chrome瀏覽器的一個(gè)開(kāi)發(fā)者工具區(qū)的一個(gè)拓展面板，主要是在開(kāi)發(fā)中幫助分析和調(diào)試錯(cuò)誤的。

Augury provides insight into the application structure for an Angular application and the relationship between these building blocks:

Augury 能敏銳的分析Angular應(yīng)用的結(jié)構(gòu)和各組成部分之間的關(guān)系，比如：
譯者注：以下詞匯后期翻譯中會(huì)盡量使用英文單詞。

• Components 組件
• Services 服務(wù)
• Routes 路由
• Modules 模塊
• Dependencies 依賴
• Injectors 注入器
• Data bindings 數(shù)據(jù)綁定
• Events 事件
• Object properties 對(duì)象屬性

在debug的時(shí)候，Augury是開(kāi)發(fā)者工具的一個(gè)補(bǔ)充，它使開(kāi)發(fā)者工具更加容易更改Angular項(xiàng)目中的狀態(tài)和事件。

Augury compliments DevTools during a debugging session, making it easy to modify state and emit events.

Installing Augury安裝Augury

The best way to install Augury is from the chrome web store. Select Extensions from the side panel, type “Augury” into the search field, and then press Enter.

安裝Augury最好的方式是從Chrome商店中獲取。選擇“拓展程序”按鈕，在搜索欄中輸入“Augury”，回車(chē)即可。

這個(gè)檢索結(jié)果會(huì)列出由 Rangle.io 提供的Augury拓展

The search result should list the Augury extension by Rangle.io:

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-D8gAtOal-1571890343676)(images/augury-extension.png)]

然后點(diǎn)擊"添加至CHROME",此時(shí)會(huì)彈出一個(gè)彈出框.選擇"添加拓展程序",這樣就完成了安裝.插件安裝成功之后,一個(gè)Augury的圖標(biāo)會(huì)出現(xiàn)在瀏覽器地址欄上(瀏覽器右上角)

When you click on “Add To Chrome”, a popup will open. Select “Add extension” to complete the process. Once the plugin has been successfully installed, an Augury icon will appear next to the address bar in the browser.

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-FBWqCsRI-1571890343676)(images/extension-logo.png)]

這個(gè)Augury圖標(biāo)提供了拓展信息,點(diǎn)擊圖標(biāo)可以了解更多.

The Augury icon provides additional information. Click on the icon now to discover what that is.

Using Augury 使用Augury

在開(kāi)始使用Augury之前,您必須在瀏覽器上運(yùn)行著一個(gè)用于分析的Angular應(yīng)用.如果您沒(méi)有調(diào)試過(guò)JavaScript應(yīng)用,您需要了解,現(xiàn)代瀏覽器都會(huì)直接提供有一個(gè)調(diào)試環(huán)境–開(kāi)發(fā)者工具,這個(gè)調(diào)試環(huán)境可以用以下熱鍵啟動(dòng).

To start using Augury, you must have an Angular application running in the browser for inspection. If you have never debugged a JavaScript application, you may not be aware that each modern Web browser provides a debug environment straight in the browser. DevTools, the debug environment is opened using the following shortcut:

• 對(duì)于Windows和Linux,使用 Ctrl + Shift + I

• 對(duì)于Mac系統(tǒng)，使用 Cmd + Opt + I

• For Windows and Linux, use Ctrl + Shift + I

• For Mac OS X, use Cmd + Opt + I

當(dāng)開(kāi)發(fā)者工具打開(kāi)的時(shí)候，你會(huì)發(fā)現(xiàn)Augury的標(biāo)簽頁(yè)在最右側(cè)

When DevTools is opened, you will find the Augury tab on the far right.

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-jZnXn1uG-1571890343678)(images/devtools.png)]

Augury features Augury特性

我們來(lái)快速瀏覽下Augury提供的主要功能。主要是為了熟悉特性，并且在需要的時(shí)候可以找到它們。

We will quickly go over the main functionality that is available in Augury. This is to become familiar with the features and how to locate them when needed.

第一個(gè)視圖時(shí) Component Tree ，它展示了應(yīng)用中載入的component。

The first view that is visible is the Component Tree which shows loaded components belonging to the application.

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-FE2pXDMv-1571890343679)(images/component-tree.png)]

這個(gè)組件樹(shù)展現(xiàn)了 components 的層次關(guān)系。當(dāng)選中一個(gè) components 時(shí)，Augury會(huì)在屬性的頁(yè)簽中顯示有關(guān)的選中的 component 的信息。

The component tree displays a hierarchical relationship of the components. When a component is selected, Augury presents additional information about the selected component in the Properties tab.

值得注意的點(diǎn)如下：

View Source – component的源碼鏈接

Change Detection – 變化檢查是否使用的開(kāi)關(guān)

Object Properties – component的屬性列表

Dependencies – component的依賴列表

Notable items of interest are:

View Source — a link to the source code of the component.

Change Detection — displays whether or not Change Detection is in use for the component.

Object Properties — lists the properties of the component.

Dependencies - lists the dependencies of the component.

點(diǎn)擊’View Source’您可以看見(jiàn)選擇的 component 的源碼。這樣就會(huì)將焦點(diǎn)移到源碼標(biāo)簽頁(yè)并且顯示源碼。

To view the source code of the selected component, click the ‘View Source’ link. This will bring the Sources tab into focus and display the source code.

Source map 資源圖

有一點(diǎn)需要記住，只用當(dāng)存在 source map 文件時(shí)， TypeScript 代碼才能顯示。在產(chǎn)物中，如果在編譯生成的JavaScript代碼中沒(méi)有 source map ，這些代碼就是被壓縮之后的并且難以閱讀。

One thing to keep in mind, the TypeScript code will only be shown if a source map file exists. In production, if no source map is found, what you will see is the compiled JavaScript code, which may also be minified and difficult to read.

Properties 標(biāo)簽頁(yè)之后是 Injector Graph ，點(diǎn)擊它會(huì)出現(xiàn) components 和 services 的依賴。

Next to the Properties tab is the Injector Graph, clicking on it will display the dependency of components and services.

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-7QPD3PDM-1571890343682)(images/injector-graph.png)]

在后續(xù)章節(jié)我們會(huì)詳細(xì)介紹 Injector Graph

We will learn more about how to interpret the Injector Graph in later lessons.

Augury最后一個(gè)重要的特性是 Router Tree ，它會(huì)展示應(yīng)用的路由信息。 Router Tree 標(biāo)簽頁(yè)在 Component Tree 的下一個(gè)。

The final major feature of Augury is the Router Tree, which displays the routing information for the application. The Router Tree tab is located next to the Component Tree tab along the top left side.

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來(lái)直接上傳(img-DoZuPFRF-1571890343684)(images/router-tree.png)]

有一些東西我們目前并未涉及，比如數(shù)據(jù)綁定、事件等，在后續(xù)章節(jié)我們將說(shuō)明。當(dāng)然，現(xiàn)在您對(duì)Augury有了一個(gè)基本了解并且知道怎么去發(fā)現(xiàn)Angular應(yīng)用的特性。

There are a few things we didn’t cover here such as data binding and events which will be covered in other lessons. However, you now have a basic understanding of Augury and how to start exploring its features with an Angular application.

Augury在上線之后也在不斷改進(jìn)變化提高，并且它會(huì)繼續(xù)不斷提高。我們衷心的希望您喜歡Augury并且讓他成為您不可或缺的工具。我們歡迎所有反饋，快來(lái)加入我們 Slack channel （譯者注：這是一個(gè)團(tuán)隊(duì)交流工具,譯者ID：Free Ming）

Augury has evolved and improved over time since its debut, and it will continue to improve. We hope you will come to love Augury and make it an indispensable tool in your toolbox. We love and welcome all feedback, come join us on our Slack channel.

感謝您看到了這里，這里是結(jié)尾。如果對(duì)您有幫助，我深感欣慰。自己給自己做廣告，不犯法吧？歡迎關(guān)注WeChat公眾號(hào)

**微信公眾號(hào)： 耐撕程序員

有資源

有想法

有技術(shù)貼

隨手掃一掃

不吃虧不上當(dāng)

大家一起天天向上

歡迎掃碼關(guān)注相互交流**

總結(jié)

以上是生活随笔為你收集整理的欢迎使用Augury[翻译]的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。