Tutorial
How To Debug Angular CLI Applications in Visual Studio 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:
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.