Debugging Angular Applications: DevTools

Learn how to debug an Angular application using DevTools.

We'll cover the following

The Angular team has created a tool that complements the debugging process with breakpoints, which we will learn in this lesson.

Angular DevTools is a browser extension created and maintained by the Angular team that allows us to debug and profile Angular applications directly in the browser. It is currently supported by Google Chrome and Mozilla Firefox and can be downloaded from their respective stores.

To open the extension, open the browser developer tools and select the “Angular” tab. It contains two additional tabs:

  • Components: Displays the component tree of the Angular application

  • Profiler: Allows us to profile and inspect the Angular application

The “Components” tab

The “Components” tab allows us to preview the components and directives of an Angular application and interact with them. If we select a component from the tree representation, we can view its properties and metadata on the right-hand side:

Get hands-on with 1200+ tech skills courses.