Debug Angular App

Hi Friends, This is Lakshman here.

As part of the Series "Angular Best Practices".

Today, We will Debug Angular App.

Pre-requisites:

The pre-requisites are

Debug App

There are lot of option on debugging app, we are going to look only options below,

  • Via Debug For Chrome VS Code Extension
  • Via DevTools (All Browser)
  • Angular DevTools Browser Extension

Do's

  • Always Place Checkpoint on Code or Browser to debug
  • Evalvulate the value via Debug Console on VS Code or on Browser Dev Console.

Don't

  • Never type debugger; in any part of code.
  • Don't use console.log to check the values. It may lead to data privacy issues.

Some Snapshot

  • Debug on VS Code with Chrome Extensions
Via Chrome Extension

Via Chrome Extension

  • Debug on Chrome Browser
via Chrome Browser

via Chrome Browser
  • Debug via Angular DevTools
Via Angular DevTools

Via Angular DevTools

That wrap up the Debug Angular App

On-road head, we will discuss a lot of things.

Looking forward to your comments and share your feedback.

Until that, I am Lakshman, Signing Off.

Comments

Post a Comment

Popular posts from this blog

Model Mapper in Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will Model Mapper in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here Model Mapper It's a concept build based on AutoMapper from C#. While integrating with API, When we were required to map property. The Model Mapper requires Two things to do, ModelMapper Class PropertyMap Function. The ModelMapper class file as below, export class ModelMapper<T> { _propertyMapping: any; _target: any; constructor(type: { new(): T }) { this._target = new type(); this._propertyMapping = this._target.constructor._propertyMap; } map(source: any) { Object.keys(this._target).forEach((key) => { const mappedKey = this._propertyMapping[key]; if (mappedKey) { this._target[key] = source[mappedKey]; } else { this._target[key] = source[key]; } }); ...
Read more

Implement Logging in Angular with Firebase

Hi Friends, This is Lakshman here. Welcome back to the Series Angular Best Practices Today, We will Implement Logging for your angular app . Every Application required Logging irresptive of Application. Its either Front-End or Back-End. For Back-End, we have lots of packages and SDK available for such as Serilog, Log4Net for .NET Core, Framework. However, In Front-End we need to Store your Logs somewhere in NoSQL Database where we can query the logs. Today we are going to use FireBase Cloud Database to Store our logging. As its Client-side SDK. Our other options are Application Insights (Microsoft Azure) JSLog with Seq. etc., Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here FireBase Account with Cloud Database - Click Here For Code Editor its VS Code. Implementation: We will go there the Implementation by Steps, Step 1: Create the Cloud FireBase Database - Click Here Step 2: Add Web Client for Project via Steps Step 3: Copy th...
Read more

RxJS Subject In Angular

Hi Friends, This is Lakshman here. As part of the Series "Angular Best Practices". Today, We will RxJS Subject in Angular . Pre-requisites: The pre-requisites are Node.JS - Click Here Angular CLI - Click Here VS Code - Click Here RxJS Subject A Subject is like an Observable, Where we can subscribe to information and receives it when new data is available. Now, we are going to see how we could use Subject in Angular. Sent Info between Components. At First, we need a service to define our Subject as below, import { Observable, Subject } from 'rxjs'; private infoSubject = new Subject<any>(); Then we need to set up the method to get Observable, Send and Clear Info as below, import { Observable, Subject } from 'rxjs'; ... onInfo(): Observable<any> { return this.infoSubject.asObservable(); } sendInfo(info: any) { if (info !== undefined) { this.infoSubject.next(info); } } clearInfo() { this.infoSubject.next(); ...
Read more