Debugging Angular applications with Augury

Angular Augury

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.
  • You will find a new tab named ‘Augury’ on the developer toolbar after installing the extension as below:

    Devtool Augury Tab
  • 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.

  1. Component Tree
  2. Router Tree
  3. 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.

  1. Component Tree
    • ‘Component Tree’ tab shows all components that are loaded in the application.
    • It displays a hierarchical relationship between the components.

      Augury Component Tree
    • Properties tab: You will see more information about a component in the Properties tab on selecting a specific component.

      Component Tab Properties
      • 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.

      Component Tree Injector Graph
  2. Router Tree
    • The Router Tree tab is present next to the Component Tree tab.
    • It displays the routing information for the application.

      Augury Router Tree
  3. NgModules
    • The NgModules tab is present next to the Router Tree tab.
    • It displays all angular modules loaded for the application.

      Augury Ng Modules Tab

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


I hope you like this article and helps you to solve your problems.

Visit Techtalkbook to find more related topics.


About the Author

Sandeep Agrawal
working @ Kalpavruksh Technologies as Software Engineer. I am a simple and straightforward person adaptable to any environment and work culture. Like to work in a creative and challenging environment using cutting edge technologies where I could constantly learn and successfully deliver solutions to problems.

Be the first to comment on "Debugging Angular applications with Augury"

Leave a comment

Your email address will not be published.


*


1 Shares
Tweet
Pin1
Share
Share
Share
%d bloggers like this: