Debugging Angular CLI Applications in Visual Studio Code

Debugging Angular CLI Applications in Visual Studio Code

In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code.

In this post, we are going to create an Angular CLI application, then add configuration to debug it in Visual Studio Code.

****For an Angular CLI application, create a debug configuration in VS Code, install the Debugger for Chrome extension, then run in debug mode.

To be able to test an Angular CLI application, you need an Angular CLI application :) I’ll provide the basic steps, but for more reference on how to get started look at the Angular CLI page.

First, you’ll need to install the Angular CLI.

npm install -g @angular/cli

After that finishes, you’ll need to actually generate your new application. This will take a bit as it needs to install LOTS of NPM packages.

ng new my-app

Open the project in VS Code and you should see the following.

Now, that you’ve got your new fancy Angular app, go ahead and run it to make sure everything looks right.

ng serve

Should look like this.

Creating Debug Configuration

Assuming you’ve made it this far, we are ready to start debugging! Before we do, however, it’s worth understanding how configuring debugging in VS Code works. Basically debug configurations are saved in a launch*.json* file which is stored inside of a .vscode folder. This .vscode folder is used to store different configurations for Code including our required debugging stuff.

Before you create your debug configuration, you need to install the Debugger for Chrome extension. Find and install this extension from the extension tab in VS Code. After installing, reload VS Code.

Now, to create a debug configuration, you can open the debug panel (the bug looking button on the left panel). At the top of the debug panel, you should see a dropdown that says “No Configurations”.

To the right of that dropdown, there is a gear icon. Click this button to have VS Code automatically generate that .vscode folder and launch.json file mentioned above.

Then choose Chrome.

You should get the following configuration created for you.

The only thing we need to do is update the port from 8080 to 4200.

Let’s Debug

Now we’re ready! Go ahead and click the play button at the top of the Debug panel which will launch an instance of Chrome in debug mode. Keep in mind your app should already be running from using ng serve earlier. In VS Code, you should see the Debug toolbar pop up.

With this up and running, you can set a breakpoint in your App.component.ts. Open up your App.component.ts and add a breakpoint inside of the component by clicking in the gutter (to the left of the line numbers). Should look like this.

Now, refresh debugging by clicking the refresh button on the debugging toolbar. This should open your application again and trigger this breakpoin. You should be directed back to VS Code directly to the place where you set your breakpoint.

From here, you can set more breakpoints, inspect variables, etc. If you are interested in learning more about debugging JavaScript in general in either Chrome or VS Code you can check out Debugging JavaScript in Chrome and Visual Studio Code.

Learn more

Angular 7 Tutorial - Learn Angular 7 by Example

Build a Simple Web App with Express, Angular, and GraphQL

Build a Basic CRUD App with Laravel and Angular

AngularJS tutorial for beginners with NodeJS, ExpressJS and MongoDB

MEAN Stack Tutorial MongoDB, ExpressJS, AngularJS and NodeJS

Angular Authentication Tutorial

Angular 7 + Spring Boot CRUD Example

Angular 7 + Spring Boot Login Authentication Example

Angular 7 (formerly Angular 2) - The Complete Guide

Angular & NodeJS - The MEAN Stack Guide

Learn and Understand AngularJS

Angular Crash Course for Busy Developers

angular visual-studio

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Angular Language Service for Visual Studio   

Great news everyone: The Angular Language Service is coming to Visual Studio! For those who don’t know, the Angular team has done a lot of great work on powering up the editing experience for Angular using something called the Angular Language Service.

Deploy an Angular App from Visual Studio Code to Azure

In this article we will learn how deploy an Angular App from Visual Studio Code to Azure - What do you get when you mix Angular 6, Node 10, Visual Studio Code and Azure? A really quick and slick way to develop and deploy a web application using the latest and greatest technologies. Keep reading to find out how.

Visual Studio 2019 v16.7 Preview 2 Available Today!

Today we are releasing 16.7 Preview 2 with new features in C++ Connection Manager, .NET Productivity, Git Productivity, and Local Process with Kubernetes.

Visualizing data with NGX-Charts in Angular

Data Science, Data Analytics, Big Data, these are the buzz words of today's world. A huge amount of data is being generated and analyzed every day. So communica

Basics of Angular: Part-1

What is Angular? What it does? How we implement it in a project? So, here are some basics of angular to let you learn more about angular. Angular is a Typesc