Augury is an open source tool available to Google Chrome that was developed by Google in conjunction with Rangle.IO for debugging and profiling your Angular application. Augury will provide detailed insights of your application structure and how different app building blocks relate to each other. These building blocks are: Components, Services, Routes, Modules, Dependencies, Injectors, Data bindings, Events and Object properties. Augury helps Angular developers to visualize their application through component trees and debugging tools. For Augury to work your app must be in development mode and won’t work on when in development mode.

Features

It has the following features that are useful to your application:

Dependency Injection

Augury Provides a hierarchical view of the structure of your Angular App. You can view components and how they relate to each other in the application – Parent – child component relationship. It will provide more information on the property tab (located on the right) if you select a component. This will display the state and the title of the component. You can also view the source code of a component by selecting view source on the property tab.

Please note if a source map doesn’t exist for your application, you will see minified JS source instead of your beautifully crafted TypeScript code Also, you can view the app dependencies inside the state property under the property tab. This information is also provided visually using the injector graph tab just next to the property tab. It provides a visual representation of component dependencies instead of using the source code to do the same. You can learn more about this here.

Module List

This will provide you with information about all the modules in your application starting with appModule. This feature provides a list of imports, exports, providers, declarations found in the module. This includes all angular modules you have used in your application such as BrowserModule, httpModule etc. and all your feature modules that you have created yourself. You can learn more about this here.

Routes Tree

Router tree displays all the defined routes that are currently loaded in the application in a hierarchical tree manner. It starts from the AppComponent which is the root components going all the way to the last component in the root. It will show you the name of the component and the router path if you hover on a route in the route tree. You can more about augury routes feature here.

Installation

You can get augury in the Google Chrome Webstore here. Then click on add to chrome and wait for the process to complete. There are other browser that accept chrome extensions but I have not tested whether augury works on them.

Using Augury

You must have an angular application in development mode to use Augury. Then open the developers’ tools (DevTools) in chrome by pressing Ctrl + Shift + I in windows or Cmd + Opt + I in Mac OS X. Then locate the Augury tab on the far right.

You can get augury tutorials and detailed demos here.