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:
Related posts
Download Modern Web Development with Angular App Seeding test data in TypeORM Setup TypeORM TypeORM Entity & Column decorators Setup TypeORM Create PostgreSQL database & user Angular 14 Apollo Client Setup Angular 14 Apollo Client Setup Debugging Angular applications Configuring CORS with Express.js Mocking GraphQL with Apollo Server GraphQL APIs with Apollo Server & Apollo Studio [Part 2] GraphQL APIs with Apollo Server & Apollo Studio Watch and compile TypeScript code to JavaScript Setup TypeScript with Node.js & Express.js Setup the server with Node.js/Express.js/Apollo Storing data with PostgreSQL and TypeORM Using GraphQL and Apollo for front- and back-end integration Using NVM on Windows How to Use Node.js to Run JavaScript on Servers Modern full-stack single-page apps' architecture 99+ Web Development Projects Challenges