How to debug Angular with Augury
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Debugging Angular applications with Augury provides visual inspection of component hierarchy, state, and dependency injection. With over 12 years of Angular development experience since 2014 and as the creator of CoreUI, I’ve used Augury to debug complex component trees in enterprise applications. Augury is a Chrome and Firefox extension that extends browser DevTools with Angular-specific debugging capabilities. This approach helps you visualize component relationships, inspect properties, and understand application structure.
Use Augury browser extension to visually debug Angular component tree, state, and dependency injection.
Install Augury:
- Chrome: Install “Augury” from Chrome Web Store
- Firefox: Install “Augury” from Firefox Add-ons
- Open DevTools (F12)
- Navigate to “Augury” tab
Note: Augury works best with Angular versions 9-11. For Angular 12+, use Angular DevTools instead (built-in Chrome extension).
Component Tree Inspection:
// app.component.ts
import { Component } from '@angular/core'
@Component({
selector: 'app-root',
template: `
<div>
<app-header></app-header>
<app-sidebar [collapsed]="sidebarCollapsed"></app-sidebar>
<app-content>
<app-user-list [users]="users"></app-user-list>
</app-content>
<app-footer></app-footer>
</div>
`
})
export class AppComponent {
sidebarCollapsed = false
users = [
{ id: 1, name: 'John', role: 'Admin' },
{ id: 2, name: 'Jane', role: 'User' }
]
toggleSidebar() {
this.sidebarCollapsed = !this.sidebarCollapsed
}
}
In Augury:
- View component hierarchy as a tree
- See parent-child relationships
- Click components to inspect properties
- View Input/Output bindings
Inspecting Component State:
// user-list.component.ts
import { Component, Input, OnInit } from '@angular/core'
import { UserService } from './user.service'
@Component({
selector: 'app-user-list',
template: `
<div>
<h2>Users ({{ filteredUsers.length }})</h2>
<input [(ngModel)]="searchTerm" placeholder="Search users">
<ul>
<li *ngFor="let user of filteredUsers">
{{ user.name }} - {{ user.role }}
</li>
</ul>
</div>
`
})
export class UserListComponent implements OnInit {
@Input() users: any[] = []
searchTerm = ''
filteredUsers: any[] = []
constructor(private userService: UserService) {}
ngOnInit() {
this.filterUsers()
}
filterUsers() {
this.filteredUsers = this.users.filter(user =>
user.name.toLowerCase().includes(this.searchTerm.toLowerCase())
)
}
}
In Augury Component Tree:
- Select
UserListComponent - View “Properties” tab
- See:
users,searchTerm,filteredUsers - Edit values in real-time
- Watch changes propagate
Dependency Injection Inspection:
// data.component.ts
import { Component } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { UserService } from './services/user.service'
import { AuthService } from './services/auth.service'
import { LoggerService } from './services/logger.service'
@Component({
selector: 'app-data',
template: '<div>{{ data }}</div>',
providers: [LoggerService]
})
export class DataComponent {
data: any
constructor(
private http: HttpClient,
private userService: UserService,
private authService: AuthService,
private logger: LoggerService
) {
this.logger.log('DataComponent initialized')
}
}
In Augury “Injector Graph”:
- View dependency tree
- See provided services
- Understand injection hierarchy
- Identify circular dependencies
- Check provider scope
Router State Debugging:
// app-routing.module.ts
import { NgModule } from '@angular/core'
import { RouterModule, Routes } from '@angular/router'
import { HomeComponent } from './home/home.component'
import { UsersComponent } from './users/users.component'
import { UserDetailComponent } from './users/user-detail.component'
import { AuthGuard } from './guards/auth.guard'
const routes: Routes = [
{ path: '', component: HomeComponent },
{
path: 'users',
component: UsersComponent,
canActivate: [AuthGuard]
},
{
path: 'users/:id',
component: UserDetailComponent,
data: { title: 'User Details' }
},
{ path: '**', redirectTo: '' }
]
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}
In Augury “Router Tree”:
- View route configuration
- See active route
- Inspect route parameters
- Check route guards
- View route data
Visualizing Change Detection:
// counter.component.ts
import { Component, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
@Component({
selector: 'app-counter',
template: `
<div>
<p>Count: {{ count }}</p>
<button (click)="increment()">Increment</button>
</div>
`,
changeDetection: ChangeDetectionStrategy.OnPush
})
export class CounterComponent {
count = 0
constructor(private cdr: ChangeDetectorRef) {}
increment() {
this.count++
// Augury shows when change detection runs
this.cdr.markForCheck()
}
}
In Augury:
- “Component Tree” shows change detection strategy
- See which components use OnPush
- Monitor change detection cycles
Module Structure:
// app.module.ts
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { HttpClientModule } from '@angular/common/http'
import { FormsModule } from '@angular/forms'
import { AppComponent } from './app.component'
import { UserModule } from './user/user.module'
import { SharedModule } from './shared/shared.module'
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
HttpClientModule,
FormsModule,
UserModule,
SharedModule
],
bootstrap: [AppComponent]
})
export class AppModule {}
In Augury “Modules”:
- View loaded modules
- See module dependencies
- Inspect declarations, imports, exports
- Understand module structure
Performance Insights:
export class PerformanceComponent implements OnInit {
items: any[] = []
ngOnInit() {
// Generate large dataset
this.items = Array.from({ length: 1000 }, (_, i) => ({
id: i,
name: `Item ${i}`,
value: Math.random()
}))
}
trackByFn(index: number, item: any) {
return item.id
}
}
In Augury:
- Monitor component render times
- Identify performance bottlenecks
- See change detection frequency
Alternative: Angular DevTools (Recommended for Angular 12+):
Angular DevTools is the official replacement for Augury:
- Install “Angular DevTools” from Chrome Web Store
- More features: profiler, change detection timeline
- Better performance
- Official support from Angular team
// Same debugging features as Augury
// Plus:
// - Component Profiler
// - Change Detection Profiler
// - Dependency Injection tree
// - Better TypeScript support
Best Practice Note
Augury is best for Angular 9-11; use Angular DevTools for Angular 12+. The component tree visualization helps understand complex hierarchies quickly. Editing properties in real-time is useful for testing different states. The injector graph reveals provider scopes and dependencies. Router tree shows active routes and guards. Augury can impact performance, so disable when not debugging. This is how we debug CoreUI Angular applications—using Augury or Angular DevTools to visualize component relationships, inspect state, and understand dependency injection for efficient troubleshooting of complex enterprise applications.
