Debugging Angular applications with Augury — Technolize Your Future

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.
• 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.

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.
• 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.

References

• https://augury.rangle.io
• https://augury.rangle.io/pages/guides/augury.html

Originally published at https://techtalkbook.com on December 7, 2020.