Recommended Free Tools
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Angular DevTools is a browser extension for inspecting Angular app structure and profiling Angular work. Its Components panel helps you find component instances and examine their state; its Profiler shows change-detection cycles and lifecycle activity. To connect, the page must contain a detectable Angular app running a development build—production optimizations remove debugging features the extension needs.
What Angular DevTools includes
Install the extension from the Chrome Web Store or Firefox Add-ons, then open browser developer tools on a page running your app. Angular DevTools appears as an Angular tab. The current Angular overview lists four main panels:
- Components: inspect the component and directive hierarchy, instance properties, and metadata.
- Profiler: record and explore change-detection and lifecycle activity.
- Injector Tree: inspect the injector hierarchy.
- Router Tree: inspect the router hierarchy.
The overview also mentions experimental tabs, such as Transfer State, that can be enabled in settings but are not part of its documented core panels. An information popover reports the Angular version on the inspected page and the DevTools version. The Chrome new tab page does not run installed extensions, so inspect an app page or another regular webpage instead. Panel lists can vary between documentation versions: the current overview lists four main panels, while the Angular v20 overview lists Components and Profiler.
Inspect components, directives, and state
Use the Components panel when you need to locate an instance or understand how the rendered app is organized. Its tree shows relationships between components and directives. Select an entry to see its properties and metadata, or search by name to find instances.
#1 Best Overall
- Use the inspect-element control to select a component or directive from the rendered page.
- Double-click a tree entry to select its host node in the browser’s Elements or Inspector panel.
- Use the source control to open the component definition.
- To change an editable property for debugging, right-click its value, enter a new value, and press Enter. Editing is available only for supported property types.
In the browser console, $ng0 refers to the most recently selected instance, $ng1 to the instance selected before it, and so on. The tree also shows @defer blocks, including configured triggers and placeholder, loading, or error blocks. If hydration is enabled, it shows component hydration status and can display an overlay.
Profile change detection with Angular DevTools
Use the Profiler to see which Angular work occurred during an interaction and where time was spent in a change-detection cycle.
- Open the Angular tab and select Profiler.
- Start a recording, then perform the interaction you want to investigate.
- Stop the recording and select a change-detection cycle to inspect its components and directives, time spent in change detection, and estimated frame rate when it falls below 60 fps.
- Follow the component breakdown or flame-graph-like hierarchy to locate where time accumulated in the render tree.
The graph is a relative visualization of time across that hierarchy, not a standalone measurement of overall user-perceived performance. Save a profile as JSON to import it later. Treat it as evidence about the recorded interaction and build; measure browser-level performance separately to determine whether a change improves the experience. Angular’s performance overview recommends finding specific bottlenecks before choosing an optimization.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Fix the driver behind crashes, sound loss and screen glitches3Clear out junk files and repair common Windows errorsWhen to use Chrome’s Performance panel
Angular DevTools’ Profiler focuses on Angular execution: change-detection cycles, components, and lifecycle activity. Chrome’s Performance panel can place Angular events—such as components, change detection, and lifecycle hooks—alongside browser performance data. The Angular and browser data appear on separate but correlated tracks, helping you distinguish framework work from other scripts and browser activity.
Rank #3
This Angular profiling integration works only in development mode. Enable it by calling ng.enableProfiling() in the Chrome console, or call enableProfiling() from @angular/core before app bootstrap. To follow component links from an Angular track into Angular DevTools, the documentation requires the Chrome extension and a Chrome experimental flag.
Why Angular DevTools may not connect
If the extension says “Angular application not detected,” it may not be able to communicate with a running Angular app on that page. If it reports that the app uses production configuration, the build’s production optimizations have removed debugging features the extension requires.
Quick Recap
- For local development:
ng servedisables optimizations by default, making it suitable for DevTools inspection. - For a deployed app: configure the build with
optimization: falsewhen you need to debug it with Angular DevTools. This is a debugging configuration, not a claim that a normal optimized production build is inspectable.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
