Debugging with Angular Augury

Augury is a Chrome DevTools extension for debugging and profiling Angular applications. It is a purpose-built tool designed to help developers visually navigate the component tree, inspect the state of the router, and enable breakpoint debugging by source mapping between the generated JavaScript code and the TypeScript code that the developer coded in.

Note that Augury is not fully compatible with Angular 9's Ivy rendering engine. For certain features like Router Tree and NgModules to work, you need to temporarily disable Ivy in your project.

You can turn off Ivy by updating tsconfig.app.json in the root of your project to add the following property to it:

"angularCompileOptions": {
  "enableIvy": false
}

You can download Augury from https://augury.angular.io. Once installed, when you open Chrome DevTools for your Angular app, you'll note a new tab for Augury, as illustrated:

...