Debugging Angular applications

By default, Angular operates in development mode, which has debugging enabled. To switch to production mode, which also stops debugging and excludes any debugging information from the final production bundles, developers can use the enableProdMode() method.

We also have a set of APIs on the global ng object that you can use to call methods, change the state, and access components directly from your browser's console when your Angular application is active thanks to the new Ivy renderer. For further details, visit https://angular.io/api/core/global.

Open the console of your browser after launching your Angular application, and you should be able to see this message:

Angular is running in development mode. Call enableProdMode() to enable production mode 

This only informs you that debugging is enabled and that your application is in development mode. You should disable debugging by turning on production mode using the enableProdMode() function once you have finished developing your application:

import { enableProdMode } from '@angular/core'; 

enableProdMode(); 

The size of your final application bundles will be less and the runtime performance will improve as soon as you instruct Angular to stop doing numerous things that are not necessary in production.

In addition, you should be able to see that this method has already been added if you open the src/main.ts file of your project:

import { enableProdMode } from '@angular/core'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 
import { AppModule } from './app/app.module'; 
import { environment } from './environments/environment'; 

if (environment.production) { 
  enableProdMode(); 
} 

// [...] 

//...

Select a DOM element in your application, such as the Feed button, and then use the context menu to select Inspect (or CTRL+SHIFT+I on Chrome).

In DevTools, we can use $0 to refer to the most recent chosen DOM element. We can obtain the component that produced that element in the console by combining that with the ng.getOwningComponent() method and doing as follows.

We learned that Angular runs by default in debugging-enabled development mode and how to switch to production mode after our application is complete. We've also seen a few Ivy ways that enable developers to use the browser console to troubleshoot their Angular applications.

• Author: Ahmed Bouchefra Follow @ahmedbouchefra

• Date: 24 Sep 2022