What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Angular DevTools is a browser extension for inspecting an Angular app’s component structure and profiling its change-detection work. It adds an Angular tab to browser developer tools, where you can inspect components and directives, record profiler sessions, and view injector and router trees. It connects only when the page has a detectable Angular app running with development debugging features available.
What Angular DevTools includes
Install the extension from the Chrome Web Store or Firefox Add-ons, then open browser developer tools on the page you want to inspect and choose the Angular tab. The browser’s new tab page does not run installed extensions, so use an app page instead. The extension’s information popover shows the Angular version on the inspected page and the DevTools version.
As an Amazon Associate I earn from qualifying purchases.
The current Angular overview documents four main panels:
Do these 3 things before closing this tab:
1Fix the driver behind crashes, sound loss and screen glitches2Repair Windows errors before they cause bigger problems3Scan for outdated or missing drivers - takes under a minute- Components: inspect component and directive instances, their hierarchy, state, and metadata.
- Profiler: record change-detection and lifecycle activity to see where Angular execution time is spent.
- Injector Tree: inspect the application’s injector hierarchy.
- Router Tree: inspect the router structure. Angular documents this panel separately in its Router Tree guide.
The overview also notes that other tabs, such as Transfer State, are experimental and can be enabled in settings. They are not part of the overview’s documented set of main panels. Panel availability can vary across documentation versions: for example, the current overview lists four main panels, while the v20 Router Tree documentation reflects a versioned documentation context. Check the documentation for the Angular version you use rather than assuming every interface is identical.
#1 Best Overall
Inspect components and directives in the Components panel
The Components panel presents components and directives as a hierarchy. Select an entry to inspect its properties and metadata, or use the search box to find instances by name. The controls connect the tree to the rendered page and source code, making it useful both for understanding structure and for moving from an instance to the place it appears.
- Use the inspect-element control to select a component or directive directly 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.
- Right-click an editable property value, enter a new value, and press Enter. Editing is available only for supported property types.
In the console, $ng0 refers to the most recently selected instance, $ng1 to the one selected before it, and subsequent numbers to earlier selections. This provides a quick way to examine selected instances from the console.
The tree also represents @defer blocks and can show their configured triggers and placeholder, loading, or error blocks. When hydration is enabled, it shows component hydration status and can display a hydration overlay. See Angular’s component tree guide for the documented inspection controls.
Record and read a Profiler session
The Profiler records Angular execution events such as change detection and lifecycle-hook execution. A session captures the interaction you perform while recording; it is diagnostic evidence for that interaction and build, not a universal performance score.
Rank #3
- Open the Angular tab in browser developer tools and choose Profiler.
- Start a recording, then perform the interaction you want to investigate in the app.
- Stop the recording and select a change-detection cycle to inspect its details.
- Use the component breakdown and hierarchy visualization to find where Angular spent time in that cycle.
Selecting a cycle shows the components and directives involved and the time spent in change detection. When the estimated frame rate is below 60 frames per second, the Profiler also shows an estimated frame rate. Its flame-graph-like view is a relative visualization of time across the render hierarchy, not a standalone measure of overall user-perceived performance. Angular explains the recording and views in its Profiler guide.
You can save a profile as JSON and import it later. A saved profile helps compare or revisit the recorded diagnostic evidence, but it does not establish that a proposed optimization will improve production performance. Measure the relevant browser-level outcome after changing the app; Angular’s performance overview recommends identifying a specific bottleneck before choosing an optimization.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.When to use Chrome’s Performance panel instead
Angular DevTools’ Profiler focuses on Angular execution: change-detection cycles, involved components, and lifecycle activity. Chrome’s Performance panel can place framework-specific Angular events—including components, change detection, and lifecycle hooks—alongside browser performance data. The Angular and browser data appear on separate but correlated tracks, which can help distinguish Angular work from rendering, other scripts, or other browser activity.
This Chrome integration works exclusively in development mode. Enable it by calling ng.enableProfiling() in the Chrome console, or call enableProfiling() from @angular/core before app bootstrap. Links from a recorded Angular track to Angular DevTools require the Chrome extension and the experimental Chrome flag documented in Angular’s Chrome DevTools profiling guide.
Choose the tool based on the question: use Components to locate and inspect an instance; use the Angular Profiler to examine change-detection activity and its component breakdown; use Chrome’s Performance panel when you need to correlate Angular events with browser-level work.
Why Angular DevTools may not connect
If the extension says “Angular application not detected,” the page may not contain a running Angular app that DevTools can communicate with. If it reports that the app uses production configuration, the build’s production optimizations have removed debugging features the extension needs.
For local development, ng serve disables optimizations by default. For debugging a deployed app, Angular’s overview says to configure the build with optimization: false. This changes the build configuration; do not assume the extension can inspect a normal optimized production build without that change. Consult Angular’s DevTools overview for the supported setup and connection guidance.
Recommended Free Tools
Quick Recap
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.
