Tutorial

How To Debug Angular CLI Applications in Visual Studio Code

VS Code

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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:

Angular CLI Project in VS Code

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

  • ng serve

You’ll see the following output:

Angular CLI App Running

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:

Debugger for Chrome

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.

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

Angular CLI Debug Configuration

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

Updated Angular CLI Debug Configuration

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.

Creative Commons License