improve debugging skills in Angular – Part 1

Today’s topic is well-known to all of us since it is a core skill every developer should have. Let’s explore how we could get the most out of it and level up our debugging skills. This is part one of small series dedicated to the topic of debugging in Angular.

1. Angular Devtools

Angular DevTools is a Chrome DevTools extension that is downloaded from the Chrome Web Store. After the installation, It can only be accessed while your application is running in development mode under the tab called Angular and it is split into 2 other tabs called Components and Profiler.

In the Components tab, we are able to access a specific component’s properties, inputs, and outputs. This especially, comes in handy when working with large component trees, because it is often hard to find the exact place in the code we are looking for. By changing the values of a component’s properties, we can see how a component looks and behaves in different situations. From this tab, we can navigate to the source code of the specific component and also to the elements tab where it is placed.

In the Profilers tab, by recording, we can track change detection cycles and their triggers. We can easily visualize bars, that represent every change detection cycle that occurred. In this way, we can spot potential performance bottlenecks and work on improving those places in the code. There are multiple views in this tab that we can switch through and see which components are impacted by change detection and how long it took them to rerender.

continue reading and you will learn how keeping your application up to date will help you with debugging! 🎁

2. json pipe

Per Angular official documentation for JSON pipe: “Converts a value into its JSON-format representation. Useful for debugging”.

It’s a built-in impure pipe provided by the framework. The only thing we need in order to use it is to import CommonModule. If we work with a newer approach (using standalone components), we can just import pipe into the component where we plan to utilize it. This pipe is quite convenient since it displays the object we are interested in on the application page so we can easily see it and its changes. It especially comes in handy if you work with two-way data binding using [(ngModel)]. You are able to track object changes and quickly spot if anything went wrong.

@Component({
  selector: 'json-pipe',
  template: `<div>
    <p>Without JSON pipe:</p>
    <pre>{{place}}</pre>
    <p>With JSON pipe:</p>
    <pre>{{place | json}}</pre>
  </div>`
})
export class JsonPipeComponent {
  place: any = {name: 'NYC', state: 'USA', address: {street: 'Fifth Avenue', numbers: [5, 9, 12]}};
}

3. Router debugging

From time to time we encounter router-related bugs in our apps. We are able to configure extra options for RouterModule that can help us in the debugging process. The specific one we are interested in is called enableTracing. If we set it to true it logs all internal navigation events to the console.

RouterModule.forRoot(appRoutes, { enableTracing: true });

If we work with standalone components in our project, we should call withDebugTracing function inside bootstrapApplication function.

const appRoutes: Routes = [];
bootstrapApplication(AppComponent,
  {
    providers: [
      provideRouter(appRoutes, withDebugTracing())
    ]
  }
);

We can also perform some actions only upon certain types of events. By injecting Router into our components, we are able to achieve this. Let’s say we want to toggle isLoading$ property and display some kind of loading screen to the user when isLoading$ emits a value true.

isLoading$ = new BehaviorSubject<boolean>(false);

constructor(private router: Router) {
  this.router.events
    .subscribe((event) => {
      if (event instanceof NavigationStart) {
        this.isLoading$.next(true);    
      }
      else if (event instanceof NavigationEnd) {
        this.isLoading$.next(false); 
      }
    });
}

Bonus Info 🎁

Reading error messages is the most fundamental skill when it comes to fixing our code. From Angular v15 debugging experience got vastly better. The error stack trace we read is now way more meaningful. We get more precise error messages that point to exact places in the code.

Before Angular V15 ⏪

After Angular V15 ⏩

Make sure to upgrade to newer versions of the framework and take advantage of the improvements like this one. You can learn more about this topic in the video by the Angular team.

That’s it for today! Thank you for your attention! Feel free to drop a comment in the comment section below. Don’t forget to check out video courses on Decoded Frontend and vastly improve your Angular knowledge!