歡迎使用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.
在這個章節您將瞭解什麼事Augury及其功能。本嚮導中的其餘章節將介紹更詳細的細節。並且每一個章節都有一個完成的Angular應用案例。
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 是一個瀏覽器上的Angular審查工具。它是Chrome瀏覽器的一個開發者工具區的一個拓展面板，主要是在開發中幫助分析和調試錯誤的。
Augury provides insight into the application structure for an Angular application and the relationship between these building blocks:
Augury 能敏銳的分析Angular應用的結構和各組成部分之間的關係，比如：
譯者注：以下詞彙後期翻譯中會盡量使用英文單詞。
- Components 組件
- Services 服務
- Routes 路由
- Modules 模塊
- Dependencies 依賴
- Injectors 注入器
- Data bindings 數據綁定
- Events 事件
- Object properties 對象屬性
在debug的時候，Augury是開發者工具的一個補充，它使開發者工具更加容易更改Angular項目中的狀態和事件。
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”，回車即可。
這個檢索結果會列出由 Rangle.io 提供的Augury拓展
The search result should list the Augury extension by Rangle.io:
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-D8gAtOal-1571890343676)(images/augury-extension.png)]
然後點擊"添加至CHROME",此時會彈出一個彈出框.選擇"添加拓展程序",這樣就完成了安裝.插件安裝成功之後,一個Augury的圖標會出現在瀏覽器地址欄上(瀏覽器右上角)
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.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FBWqCsRI-1571890343676)(images/extension-logo.png)]
這個Augury圖標提供了拓展信息,點擊圖標可以瞭解更多.
The Augury icon provides additional information. Click on the icon now to discover what that is.
Using Augury 使用Augury
在開始使用Augury之前,您必須在瀏覽器上運行着一個用於分析的Angular應用.如果您沒有調試過JavaScript應用,您需要了解,現代瀏覽器都會直接提供有一個調試環境–開發者工具,這個調試環境可以用以下熱鍵啓動.
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:
-
對於Windows和Linux,使用
Ctrl + Shift + I -
對於Mac系統，使用
Cmd + Opt + I -
For Windows and Linux, use
Ctrl + Shift + I -
For Mac OS X, use
Cmd + Opt + I
當開發者工具打開的時候，你會發現Augury的標籤頁在最右側
When DevTools is opened, you will find the Augury tab on the far right.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-jZnXn1uG-1571890343678)(images/devtools.png)]
Augury features Augury特性
我們來快速瀏覽下Augury提供的主要功能。主要是爲了熟悉特性，並且在需要的時候可以找到它們。
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.
第一個視圖時 Component Tree ，它展示了應用中載入的component。
The first view that is visible is the Component Tree which shows loaded components belonging to the application.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FE2pXDMv-1571890343679)(images/component-tree.png)]
這個組件樹展現了 components 的層次關係。當選中一個 components 時，Augury會在屬性的頁籤中顯示有關的選中的 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.
值得注意的點如下：
- View Source – component的源碼鏈接
- Change Detection – 變化檢查是否使用的開關
- 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.
點擊’View Source’您可以看見選擇的 component 的源碼。這樣就會將焦點移到源碼標籤頁並且顯示源碼。
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 資源圖
有一點需要記住，只用當存在 source map 文件時， TypeScript 代碼才能顯示。在產物中，如果在編譯生成的JavaScript代碼中沒有 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 標籤頁之後是 Injector Graph ，點擊它會出現 components 和 services 的依賴。
Next to the Properties tab is the Injector Graph, clicking on it will display the dependency of components and services.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-7QPD3PDM-1571890343682)(images/injector-graph.png)]
在後續章節我們會詳細介紹 Injector Graph
We will learn more about how to interpret the Injector Graph in later lessons.
Augury最後一個重要的特性是 Router Tree ，它會展示應用的路由信息。 Router Tree 標籤頁在 Component Tree 的下一個。
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.
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-DoZuPFRF-1571890343684)(images/router-tree.png)]
有一些東西我們目前並未涉及，比如數據綁定、事件等，在後續章節我們將說明。當然，現在您對Augury有了一個基本瞭解並且知道怎麼去發現Angular應用的特性。
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在上線之後也在不斷改進變化提高，並且它會繼續不斷提高。我們衷心的希望您喜歡Augury並且讓他成爲您不可或缺的工具。我們歡迎所有反饋，快來加入我們 Slack channel （譯者注：這是一個團隊交流工具,譯者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.
感謝您看到了這裏，這裏是結尾。如果對您有幫助，我深感欣慰。自己給自己做廣告，不犯法吧？歡迎關注WeChat公衆號
**微信公衆號： 耐撕程序員
有資源
有想法
有技術貼
隨手掃一掃
不吃虧不上當
大家一起天天向上
歡迎掃碼關注相互交流**
