Introduction

In this post, you’ll create an Angular CLI application, then add configuration to debug it in Visual Studio Code.

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

Step 1 – Creating a Starter Project

To be able to test an Angular CLI application, you need an Angular CLI application. This tutorial provides 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 globally:

npm install -g @angular/cli

Once the installation completes, you can use Angular CLI to generate your new application. Execute the following command:

ng new my-app

This creates the my-app directory and installs the Angular dependencies.

Open the project in VS Code and you’ll see the following:

In your Terminal, execute the following command to run your application and make sure everything works:

ng serve

You’ll see the following output:

Step 2 – Creating Your Debug Configuration

To debug your application, you’ll create a debug configuration. Debug configurations are saved in a launch.json file which is stored inside of a .vscode folder, which is where you’ll find all of the configuration files for Visual Studio Code

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 Visual Studio Code:

After installing, reload VS Code and reopen your project.

Now, to create a debug configuration, you can open the debug panel. It looks like a “bug” and it’s located on the left panel of the user interface. At the top of the debug panel, you’ll see a dropdown that says No Configurations.

Click the gear icon located to the right of that dropdown. VS Code automatically generates the .vscode folder and launch.json file for your project.

Select Google Chrome as your browser.

You’ll have the following configuration created for you.

In the configuration provided, update the port from 8080 to 4200.

Visual Studio Code is now configured to debug your application.

Step 3 – Debugging Your App

Ensure that your Angular app is still running in your Terminal.

Click the Play button at the top of the Debug panel. This launches an instance of Google Chrome in debug mode. In VS Code, you’ll see the Debug toolbar pop up.

Set a breakpoint in your App.component.ts file. Open the App.component.ts file in Visual Studio Code and add a breakpoint inside of the component by clicking in the area to the left of the line numbers, called the gutter, as shown in the following figure:

Now, refresh debugging by clicking the Refresh button on the Debugging toolbar. This opens your application again and triggers the breakpoin. You’ll be directed back to VS Code directly to the place where you set your breakpoint:

From here, you can set more breakpoints, inspect variables, and debug your projects.