Welcome to 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 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 provides insight into the application structure for an Angular application and the relationship between these building blocks:
- Components
- Services
- Routes
- Modules
- Dependencies
- Injectors
- Data bindings
- Events
- Object properties
Augury compliments DevTools during a debugging session, making it easy to modify state and emit events.
Installing 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.
The search result should list the Augury extension by Rangle.io:
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.
The Augury icon provides additional information. Click on the icon now to discover what that is.
Using Augury
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:
- For Windows and Linux, use
Ctrl + Shift + I
- For Mac OS X, use
Cmd + Opt + I
When DevTools is opened, you will find the Augury tab on the far right.
Augury features
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.
The first view that is visible is the Component Tree which shows loaded components belonging to the application.
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.
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.
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
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.
Next to the Properties tab is the Injector Graph, clicking on it will display the dependency of components and services.
We will learn more about how to interpret the Injector Graph in later lessons.
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.
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 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.