Tips for Debugging your Angular Applications

This Angular utilizes some of the best debugging techniques, also has diffrence unique tools and techniques unique to debugging applications.

Augury

Augury Debugging is a Chrome and Firefox DevTools incredible extension that can be used to debug and profile Angular apps. Using Augury, you can view component tree of Angular apps, and you can view the current state of components, also you can view how components react to state alter.

By clicking on the view source link beside each component, it can also be used to view the source of each component.

Debugger

With the debug tools statement used in any area in your codebase, it will lead the application to break at the point where the statement is set in-app. 

For example, if we need to see the data being passed to a function, we place the debugger statement at the entry point of the function:

addToCart(item) {
    debugger;
    this.store.dispatch(new AddToCart(item));
    this.inCart = true;
 }

ng probe

This is very usable DevTools command for viewing the current state of any component tree structure. To make use of cmd, visit the DevTools. In the Inspector tab of browser select any Angular containt, then navigate to the console tab and run the following cmd lines:

ng.probe($0).componentInstance

The ng.prod function takes a single parameter only: $0; this is a DevTools of extension shortcut for view the last selected element on Inspector tab mode.

Editors

Debugging using the this tool is great, but nothing exactly beats the comfort of never leaving your editor or IDE. Editors and IDEs like VS Code and WebStorm editor can be easily configured to debug Angular apps.

Tap

Debug observables is knowingly way—you never know what value will be passing through inside, especially when piping feature operators. It can be placed between piped to transparently perform side effects like logging through it.

  import { of } from 'rxjs';
    import { tap, map } from 'rxjs/operators';
    
    const evens = of(2, 4, 6, 8);
    const divisor = evens.pipe(
      tap(val => console.log(`BEFORE MAP: ${val}`)),
      map(val => val / 2),
      tap(val => console.log(`AFTER MAP: ${val}`))
    );

Profiler

Angular framework has a built-in profiler that works records the amount of time it takes to run changes detection via the application.  so you need to Update your main.ts file to be similar to the snippet below:

import { enableProdMode, ApplicationRef } from '@angular/core';
    import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    import { AppModule } from './app/app.module';
    import { environment } from './environments/environment';
    import { enableDebugTools } from '@angular/platform-browser';
    if (environment.production) {
      enableProdMode();
    }
    platformBrowserDynamic().bootstrapModule(AppModule).then(module => {
      let applicationRef = module.injector.get(ApplicationRef);
      let appComponent = applicationRef.components[0];
      enableDebugTools(appComponent);
    })
      .catch(err => console.error(err));

After making change, you can go ahead and run app the following cmd line in your DevTools console:

ng.profiler.timeChangeDetection()

Console Debugging

It is commonly used in development mode to visualize data flowing within the application. So there are lots of different methods of posting data to the console, the commonly used ones are console.log, console.warn, and console.error.

You can post data to the console hassle-free when events are triggered by logging the data from the event while using any of the console methods:

addToCart(item: Product) {
        console.log(item);
        this.store.dispatch(new AddToCart(item));
        this.inCart = true;
      }

You can post errors from your application to the console too to keep track of them using console.error.

addToCart(item: Product) {
        try {
          console.log(item);
          this.store.dispatch(new AddToCart(item));
          this.inCart = true;
          throw new Error('an error occurred');
        } catch (e) {
          console.error(e);
        }
      }