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

• Node.JS - Click Here
• Angular CLI - Click Here
• VS Code - Click Here
• VS Code Debug for Chrome Extenstion - Click Here
• Angular DevTools (Chrome) - Click Here

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

• Debug on Chrome Browser

• Debug 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.