In this article, we will learn about Augury which is a browser dev tools extension for debugging Angular applications.
What is Augury
- It is for debugging and profiling Angular applications.
- An application inspection tool for Angular that runs in the Web browser.
- Available as a developer toolbar extension of Google Chrome and Mozilla Firefox browsers.
- An open-source effort with Google and Rangle.io
How to use Augury
- You can install the extensions for Firefox and Chrome using the below link.
- https://chrome.google.com/webstore/detail/augury/elgalmkoelokbchhkhacckoklkejnhcd
- Or you can also open the extension tab of the respective browser and search for an extension named ‘Augury’ to download it.
- You will find a new tab named ‘Augury’ on the developer toolbar after installing the extension as below:
- You must have an angular application running in the browser to use Augury features.
- You can not use the tool if the application is running in production mode and therefore cannot be inspected using Augury as it is a tool for debugging the application.
- Either you need to build your application in debug mode or remove the call to enableProdMode().
Features of Augury
There are three sub-tabs available as of now in the Augury tab.
- Component Tree
- Router Tree
- NgModules
Note: These tabs available based on the features you have in your application which means, you will not see the Router Tree if you do not have any router added to your application.
Now let’s see what all options are available in these 3 tabs.
- Component Tree
- ‘Component Tree’ tab shows all components that are loaded in the application.
- It displays a hierarchical relationship between the components.
- Properties tab: You will see more information about a component in the Properties tab on selecting a specific component.
- View Source: It displays the source code of the component.
- Change Detection: It displays whether or not Change Detection is in use for the component.
- Object Properties: It lists the properties of the component.
- Dependencies: It lists the dependencies of the component.
- Injector Graph: It is present next to the Properties tab which displays the dependency of components and services.
- Router Tree
- The Router Tree tab is present next to the Component Tree tab.
- It displays the routing information for the application.
- NgModules
- The NgModules tab is present next to the Router Tree tab.
- It displays all angular modules loaded for the application.
Why use Augury
- It helps Angular developers to visualize the application using various options like component trees and visual debugging tools.
- It provides insight into the structure for an Angular application and the relationship between various building blocks like:
- Components
- Services
- Routes
- Modules
- Dependencies
- Injectors
- Data bindings
- Events
- Object properties
- Developers get immediate insight into their application structure, change detection, and performance characteristics using this extension.
- Augury allows you to modify the value of properties/states with which you can change the states or emit any event to see the changes before doing the actual changes to your code.
Useful links from for demo and architecture
- https://augury.rangle.io/pages/guides/io-demo.html
- https://augury.rangle.io/pages/guides/dependency-injection.html
- https://augury.rangle.io/pages/guides/routes.html
- https://augury.rangle.io/pages/guides/module-list.html
- https://augury.rangle.io/pages/guides/architecture.html
I hope you like this article and helps you to solve your problems.
Visit Techtalkbook to find more related topics.