Post
Ask Question

Debug Angular In VS Code

This article will demostrate how to debug Angular in VS Code, and then give some general discussion on debugging in VS Code.
 

Introduction

 
Angular is a great front-end framework for web apps. Angular is usually edited in Visual Studio Code editor. Their powers combined let you not only develop Angular app code but also debug it through the editor! We will introduce the Angular debugging in VS code in this article with an example.
 
VS Code is also a greate source code editor for various language family, such as PHP, Ruby, Go, C#, Python, C++, PowerShell, TypeScript, React, Vue, and many others, and the debugging method introduced here will work for all other languages.

Debug Angular in VS Code

 
We use VS Code  v1.53 to setup debugging for Angular,
  • Step 1: Create an Angular application;
  • Step 2: Install Debugger for Chrome (you could install other debuggers you like)
  • Step 3: Configure Debug Environment;
  • Step 4: Start Debugging;
Step 1 - Create an Angular application
 
We use the Angular CLI to create projects,
  1. npm install -g @angular/cli            // Install the Angular CLI  
  2. ng new my-app                          // Creat a new Angular app  
  3. cd my-app                              // change to the app directory  
  4. code .                                 // Open VS Code for the current directory   
Step 2 - Install Debugger for Chrome (you could install other debuggers you like, such as Firefox Debugger)
 
In VS Code environment:  Right Click Manage (Left Bottom Corner) > Extensions (or Ctrl+Shift+X) 
 
 
Open the Extensions view.  Then type 'chrome' in the search box. You'll see the extensions: Debugger for Chrome.
 
 
Press the Install button for Debugger for Chrome 
 
Step 3 - Configure Debug Environment
 
In VS Code environment: Click Run Button on the left side (or Ctrl+Shift+D) 
 
Debug icon
 
If running and debugging is not yet configured (no launch.json has been created), VS Code shows the Run start view,
 
 
You can configure the environment by creating launch.json file yourself manually, but you can do that automatically by Clicking Run and Debug button to open the Select Environment dialog box,
 
 
Select Chrome, then VS Code will create an launch.json
 
 
You might need to change the port to what your app running on, say, 4200. 
 
Step 4 - Start Debugging
 
Now, in VS Code, if you Click Run Button on the left side (or Ctrl+Shift+D), you will have a debugging environment like this,
Debugging diagram
 
Run the app from the Angular CLI (very important, otherwise the debugging will not work) by command,
  1. ng server -o 
You will see the app running,
 
Now, set your breakpoint, and run debug,
 
 
Once a debug session starts, the Debug toolbar will appear on the top of the editor.
 
Debug Actions
  • Continue / Pause F5
  • Step Over F10
  • Step Into F11
  • Step Out Shift+F11
  • Restart Ctrl+Shift+F5
  • Stop Shift+F5
The debug session is on like this,
 
 

Summary

 
We demostrated how to debug Angular in VS Code in this article.  The method introduced here will work for all other languages that VS Code editor supports.
References


TRENDING UP

View All