Debug your application
The Components tab lets you explore the structure of your application. You can visualize the component and directive instances in the DOM and inspect or modify their state.
Explore the application structure
The component tree displays a hierarchical relationship of the components and directives within your application.
Click the individual components or directives in the component explorer to select them and preview their properties. Angular DevTools displays properties and metadata on the right side of the component tree.
To look up a component or directive by name use the search box above the component tree.
Navigate to the host node
To go to the host element of a particular component or directive, double-click it in the component explorer. Angular DevTools will open the Elements tab in Chrome or the Inspector tab in Firefox, and select the associated DOM node.
Navigate to source
For components, Angular DevTools lets you navigate to the component definition in the Sources tab (Chrome) and Debugger tab (Firefox). After you select a particular component, click the icon at the top-right of the properties view:
Update property value
Like browsers' DevTools, the properties view lets you edit the value of an input, output, or other properties.
Right-click on the property value and if edit functionality is available for this value type, a text input will appear.
Type the new value and press Enter to apply this value to the property.
Access selected component or directive in console
As a shortcut in the console, Angular DevTools provides access to instances of recently selected components or directives.
Type $ng0 to get a reference to the instance of the currently selected component or directive, and type $ng1 for the previously selected instance, $ng2 for the instance selected before that, and so on.
Select a directive or component
Similar to browsers' DevTools, you can inspect the page to select a particular component or directive. Click the Inspect element icon in the top left corner within Angular DevTools and hover over a DOM element on the page. The extension recognizes the associated directives and/or components and lets you select the corresponding element in the Component tree.
Inspect your injectors
NOTE: The Injector Tree is available for Angular Applications built with version 17 or higher.
View the injector hierarchy of your application
The Injector Tree tab lets you explore the structure of the Injectors configured in your application. Here you will see two trees representing the injector hierarchy of your application. One tree is your environment hierarchy, the other is your element hierarchy.
Visualize resolution paths
When a specific injector is selected, the path that Angular's dependency injection algorithm traverses from that injector to the root is highlighted. For element injectors, this includes highlighting the environment injectors that the dependency injection algorithm jumps to when a dependency cannot be resolved in the element hierarchy.
See resolution rules for more details about how Angular resolves resolution paths.
View injector providers
Clicking an injector that has configured providers will display those providers in a list on the right of the injector tree view. Here you can view the provided token and it's type.
