skip to content

What can the Angular DevTools browser extension show you about a running app, and why does it refuse to work on a production build?

level: juniorimportance: must knowfreq 45%

answer

  1. an extra tab in browser devtools
  2. components, injectors, routes
  3. $ng0 in the console
  4. debug hooks stripped when optimized

basics

~20 s

Angular DevTools adds an Angular tab showing the component and directive tree with editable properties, the injector hierarchy with providers, and the router tree. It needs a development build, because optimized production builds strip the debug hooks it uses to talk to Angular.

solid answer

~50 s

Angular DevTools is a Chrome and Firefox extension that adds an **Angular** tab to the browser's developer tools. The **Components** tab shows the tree of components *and* directives, lets you select one to see and edit its inputs, outputs and other properties, jump to its host DOM node or source, and exposes the selection in the console as `$ng0` (then `$ng1`, `$ng2` for earlier selections). It also shows `@defer` blocks with their triggers and, for SSR apps, each component's hydration status. The **Injector Tree** tab (apps built with v17+) draws the environment and element injector hierarchies, highlights the resolution path from a selected injector, and lists its providers. There is also a **Router Tree**, plus a Profiler. On an optimized build DevTools reports that it only supports development builds: the CLI compiles out the dev-mode debug code it needs. To inspect a deployed app, build it with `optimization: false`.

go deeper

for a junior

Know the Angular tab exists, name the Components and Injector Tree tabs, and remember $ng0 for reaching the selected component from the console.

for a middle

Explain what each tab shows, including editing properties, resolution paths and providers, and why an optimized build hides the app from DevTools.

for a senior

Use the injector tree to settle wrong-instance and missing-provider bugs, and set up a non-optimized diagnostic build when a problem only appears in a deployed environment.

for a principal

Decide when a debuggable, non-optimized environment is worth running, weighing diagnostic speed against drift from what production actually ships.

## What Angular DevTools is **Angular DevTools** is a browser extension for Chrome and Firefox. Once installed, the browser's developer tools gain an **Angular** tab. It reads the live application through Angular's development-mode debugging APIs, so it sees Angular concepts - components, directives, injectors, routes - rather than raw DOM. | Tab | What it shows | | :-- | :-- | | **Components** | The component and directive tree; properties of the selected instance | | **Injector Tree** | Environment and element injector hierarchies, resolution paths and providers | | **Router Tree** | The application's route configuration as a tree | | **Profiler** | Change-detection profiling (a separate topic) | ## The Components tab - **Tree of components and directives**: not just components, but every directive applied to an element, arranged by where they sit in the view hierarchy. A search box filters by name. - **Properties view**: selecting an instance shows its inputs, outputs and other properties. You can **edit** many values in place (right-click the value, type, press Enter) to test how the UI reacts. - **Navigation**: double-click to jump to the host element in the Elements/Inspector panel, or open the component's source in the Sources/Debugger panel. - **Inspect mode**: pick an element on the page and DevTools selects the matching component or directive in the tree. - **Console shortcut**: the selected instance is available in the console as `$ng0`; `$ng1` and `$ng2` are the previous selections. This is often the fastest way from "I see it on screen" to "I can call its methods". - **`@defer` blocks** appear in the tree with their `@loading`/`@placeholder`/`@error` sub-blocks, triggers and timing options. - **Hydration**: in SSR/SSG apps with hydration, each component shows its hydration status, and an overlay can highlight hydrated regions on the page. ## The Injector Tree tab Available for applications built with Angular 17 or later, it shows two trees: the **environment injector** hierarchy (root, platform, route-level injectors) and the **element injector** hierarchy (injectors created by components and directives with `providers`). 1. Select an injector to highlight the **resolution path**: the route Angular's dependency injection walks from that injector upward, including the jump from the element hierarchy into the environment hierarchy when a token is not found among elements. 2. The providers panel lists each **token** the injector provides and its provider type, with a button to log it to the console. This turns abstract questions - "why do these two components get different instances of the service?", "which injector actually provides this token?" - into something you can see. ## Why it needs a development build If DevTools finds an Angular app that was built with production optimizations, it shows: *"We detected an application built with production configuration. Angular DevTools only supports development builds."* The reason is mechanical. Angular guards its debugging support behind the `ngDevMode` flag. When the CLI optimizes scripts, it defines `ngDevMode` as `false`, and the minifier removes every dev-only branch - including the debug APIs DevTools calls. `ng serve` uses a development configuration, so it works there by default. To inspect a deployed environment you must build it with `"optimization": false`, which also makes it bigger and slower, so do this only for a diagnostic environment. ## Other messages worth recognising - **"Angular application not detected"** usually means the page has no Angular app, or you are on a page (such as the browser's new tab page) where extensions do not run. - The information button shows which **Angular version** the page is running, handy when a bug report says "it works on my machine". ## Where it fits in a debugging routine - Use the **Components** tab to confirm what state a component actually holds, instead of adding `console.log` calls. - Use the **Injector Tree** for any "wrong instance" or "no provider" question. - Use `$ng0` to hand the selected instance to the console for anything the UI cannot do. - Keep performance work for the Profiler and the browser's own performance tools - separate skills.

  • How do you get the component selected in Angular DevTools into the browser console?
    Type `$ng0` in the console: it is the instance currently selected in the Components tab. `$ng1` and `$ng2` hold the previous selections. From there you can read fields, call methods or set signals, which is often quicker than navigating the tree for every check.
  • In Angular DevTools, why might two components show different instances of the same service?
    The Injector Tree tab usually answers it: one component, or one of its ancestors, lists the service in its `providers`, creating an element injector with its own instance, while the other resolves the token further up, often from the root environment injector. Selecting each injector highlights the resolution path that decided which instance it got.

Browser devtools show you the bricks of a building; Angular DevTools shows you the floor plan: which room (component) each brick belongs to, and which utility closet (injector) supplies each room.

saying these in an interview costs you the question

  • Angular DevTools works on any production site as long as the extension is installed.
  • The component tree only shows components, never directives.
  • Angular DevTools is only a performance profiler.
  • The injector tab lists only root-provided services.
  • Setting production: false in environment.ts is enough to make DevTools attach.