Angular DevTools

About Angular DevTools

Angular DevTools is a browser extension that adds debugging and profiling capabilities for Angular applications, available for Chrome and Firefox. It supports Angular v12 and later when the application is compiled with the optimization configuration option disabled. Once installed, it appears as an Angular tab within the browser's developer tools, offering two main panels: Components and Profiler.

The Components tab lets developers explore the hierarchical structure of components and directives in an application, inspect and edit their properties and state, view injected services and their resolution paths, navigate to a component's source definition or its associated DOM node, and select elements directly from the page. It also provides console shortcuts ($ng0, $ng1) to access recently selected component or directive instances, along with keyboard navigation and search within the component tree.

The Profiler tab records and visualizes Angular's change detection execution, showing the duration of each change detection cycle, which components and directives were involved, and what triggered the cycle. It includes a flame graph view for inspecting execution at specific points in the render tree, a mode for highlighting components affected by OnPush change detection, and the ability to export and import profiling recordings as JSON files. Starting in Angular 17, the extension also includes an Injector Tree for exploring an application's injector hierarchy. It is intended for developers building and debugging Angular applications.

Key features

• Browser extension for Chrome and Firefox that debugs and profiles Angular applications
• Component tree explorer to inspect and edit component/directive state and properties
• Profiler with flame graph view to analyze change detection performance and frame drops
• Inspect element tool to select a component or directive directly from the page
• View injected services and their resolution path for a component
• Injector Tree view to explore the injector hierarchy (Angular v17+)

Frequently asked questions