Angular Augury

Augury is a Chrome Dev Tools extension for debugging and profiling Angular applications. It is a purpose-built tool to help developers visually navigate the component tree, inspect the state of the router, and enable break point debugging by source-mapping between the generated JavaScript code and the TypeScript code that the developer coded in. You can download Augury from augury.angular.io. Once installed, when you open Chrome Dev Tools for your Angular app, you'll note a new tab for Augury, as illustrated:

Chrome Dev Tools Augury

Augury provides useful and critical information in understanding how your Angular app is behaving at runtime:

1. Current Angular version is listed, in this case, as version 5.1.2
2. Component Tree
3. Router Tree shows all the routes that have been configured in the app
4. NgModules shows the AppModule and Sub-Modules of the app

Component Tree

The Component Tree tab shows how all app components are related and how they interact with each other:

1. Select a particular component...