Augury is an application inspection tool and is one of the most commonly used developer tool extensions for Angular apps. It was built in collaboration with Rangle and Google and makes debugging and profiling Angular applications simpler during development by creating component tree visualizations and visual debugging tools.
Augury supports both Chrome and Firefox. To install it, either go to Chrome Web Store/Firefox Add-ons and search for Augury. Alternatively, you can go to https://augury.rangle.io/ and find the appropriate links for the respective extensions.
Once installed, go to an Angular application that's served using the development environment (that is, without prod mode enabled), open developer tools, find Augury in the tabs, and navigate to it:
In the top right-hand corner, you will find the Angular version that the application is being served with. The preceding screenshots show that the Angular Version that's being used in the app is 7.1.4.
On the top, we have three tabs,
- Component Tree: The Angular Component Tree structure is similar to the Elements panel, but with Angular components. We can also select the components and see more details about them in the right-hand panel.
- Router Tree: Used to visualize all the available routes in the application.
- NgModules: Lists all the modules in the application with all their dependencies.
You should also be able to see that the Component Tree tab is selected by default. Here, you can see the whole component tree, select different components, and view more details about its current state. Once a component has been selected in the Component Tree on the left, you can use $$el to access the component in the console. You will also find a link to View Source for that specific component, which is handy.
You can also select the Router Tree, where you can see all the routes that are being used in the application:
In this view, you can also see which routes are being Lazy loaded. We will talk about Lazy routes in more detail in Chapter 3, Building a Personal Blog Using Angular Router and WordPress.
The last tab in Augury is NgModules:
This shows all the different components that make up the Angular modules that are used in the application.