Angular Debugging in MS Visual Studio Code

To debug a front-end application developed in JavaScript has been easy using Developer Tools of various popular browsers. But as the web is evolving, so does the Angular world. As you know, developing applications in Angular with TypeScript programming language is very useful for the developers who come from Object Oriented environment.

But to counter the problems that occur while developing applications, you must be equipped with a good editor and debugger tools. Visual Studio Code from Microsoft has proved to be a right tool for front-end developers with its ever growing list of extensions. In this article, we will see how to use VS Code editor for debugging Angular application step-by-step.

1. Chrome Browser

Make sure you have the latest version of Chrome browser installed on your machine. This is required because the extension that we will be using in VS Code will be of Chrome.

2. Chrome Debugger Extension

You need to install Chrome Debugger extension in your VS Code editor. The shortest way to install is to visit Chrome Debugger in Microsoft's market place. If you don't have VS Code, then it will prompt you to install it before you go ahead with installation of extension. Recommended version is 3.1.4.

3. Angular CLI

Install the latest Angular CLI version using NPM. Recommended version is 1.3 or greater. Execute below command from your Command Prompt to install Angular CLI globally:

npm install -g @angular/cli@">=1.3"

4. Create New Application

To create a new application with skeleton is very easy using Angular CLI. Let's create a demo application called DemoApp.

ng new demo-app

It will start installing all the dependencies and may take some time to finish it.

5. Open VS Code

Though you can open VS Code editor directly, there is a command to do the same thing. Change to the newly created application directory and open VS Code:

cd demo-app

code .

6. Configure Launch.json File

Click on the Debugging icon in the Activity Bar to bring up the Debug View. Then click on the gear icon to configure a launch.json file, selecting Chrome for the environment. By default it will create the file with below code:

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceRoot}"
        }
    ]
}

Replace the above code with:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "ng serve",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:4200/#",
        "webRoot": "${workspaceRoot}"
      },
      {
        "name": "ng test",
        "type": "chrome",
        "request": "launch",
        "url": "http://localhost:9876/debug.html",
        "webRoot": "${workspaceRoot}"
      },
      {
        "name": "ng e2e",
        "type": "node",
        "request": "launch",
    "program": "${workspaceRoot}/node_modules/protractor/bin/protractor",
        "protocol": "inspector",
        "args": ["${workspaceRoot}/protractor.conf.js"]
      }     
    ]
  }

Above are the three objects for different purposes. First one is for application, second is for testing and third for end-to-end configuration. Below are the meanings of the attributes:

name 

Any friendly name which appears in Debug Configuration dropdown.

type

The type of debugger to use for this launch configuration. The drop down will show the ones for which you have already installed the extensions. In our case it is showing two - Node and Chrome - because Node comes by default and Chrome extension was just installed by us. You can have as many as you want for different languages like PHP, Go, DART, etc.

request

The request type of this launch configuration. Currently supported ones are launch and attach. Launch is used when there is no existing debugging process running and attach can be used when you want to attach the debugging to the existing running process.

url

The path to which the application will open up.

webroot

Supply the path of the folder opened in VS Code.

VS Code supports the variable substitution inside the strings of launch.json file and has following predefined variables:

${workspaceRoot} - the path of the folder opened in VS Code

${workspaceRootFolderName} - the name of the folder opened in VS Code without any slashes (/)
${file} - the current opened file
${relativeFile} - the current opened file relative to workspaceRoot
${fileBasename} - the current opened file's basename
${fileBasenameNoExtension} - the current opened file's basename with no file extension
${fileDirname} - the current opened file's dirname
${fileExtname} - the current opened file's extension
${cwd} - the task runner's current working directory on startup
${lineNumber} - the current selected line number in the active file

7. Start Debugging

As the configuration is completed, you can start debugging your application. To do so, set the breakpoint where you want the application to break before it proceeds. In our example, we will set it in app.component.ts file as shown below:

Now, open a terminal at the root folder (demo-app) and serve the application using Angular CLI. Execute below command:

npm start

You can also use ng serve but above command will make sure that the Angular CLI version is being used which is mentioned in the package.json file.

Go to the Debug View and select ng serve from the drop down menu and hit F5 key or click green play button to start debugging.

The names in the drop down menu are the ones which you have defined in the launch.json file.

Once the debugging is started, the application will launch in Chrome browser. It will not hit the breakpoint at first, so, refresh the page and you will be brought to the VS Code editor to the breakpoint.

After refreshing the page:

In VS Code editor:

On the left hand side you can see the call stack, local variables, etc which are very useful while debugging an application.

Hope you liked this article and if you have any comments please feel free to ask.