Debug in Visual Studio Code

VS Code has built-in debugging support for the Node.js runtime and can debug JavaScript, TypeScript, or any other language that gets compiled to JavaScript.

The debugger is optional, this is just a short guide for those who want to use it.

If the debugger is not configured in the current project see the instructions near the end of this article.

How to use the debugger

1. Click Run and Debug icon to open this view

Picture 1

click the Play button on the top and the debugger will try to run the application. If the debugger is an external debugger it will open the URL set in the lunch.json file.

Picture 2

Debug actions

Once a debug session starts, the Debug toolbar will appear on the top of the editor.

Picture 3

Set breakpoints by clicking on the editor margin or press F9 on the keyboard.

Picture 4

Clicking F10 on keyboard debugger goes line by line from breakpoint.

Clicking F11 on the keyboard debugger go in every function which calls inside the function where the breakpoint is.

When a function or line of code on which breakpoints are placed is hit from the application, the VS Code will focus on that line.

Picture 5

In the view on the left side of VS Code, inside the Variables section is a preview for the data that is coming to that function as an argument on which the breakpoints were placed

Picture 6

Below the variables section, there are 4 more sections Watch, Call Stack, Loaded Scripts, and Breakpoints

Picture 7

  1. Variables and expressions can be evaluated and watched in the Run view's WATCH section.
  2. In the Call Stack section, you can see which calls the application went through until it hit the breakpoints.
  3. The Loaded Scripts section provides an overview of all scripts that have been run.
  4. The Breakpoints section contains all the files with the line of code on which the breakpoints are placed.

 

 

 

 

Debugger configuration in VS Code

There are several ways the debugger can be configured. The way that the debugger is configured depends on the type of project and what system is being debugged

Node debugger for jest tests (server components)

We use a standard debugger configuration for running jest tests. If the debugger is not configured in the project add the following to the .vscode/launch.json

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "node",

"name": "vscode-jest-tests",

"request": "launch",

"args": [

"--runInBand",

"--watchAll=false"

],

"cwd": "${workspaceFolder}",

"console": "integratedTerminal",

"internalConsoleOptions": "neverOpen",

"disableOptimisticBPs": true,

"program": "${workspaceFolder}/node_modules/.bin/jest",

"windows": {

"program": "${workspaceFolder}/node_modules/jest/bin/jest"

}

}

]

}

External web debugger for UI projects with Chrome

  1. Select the

Run and Debug icon on the side of VS Code

Picture 9

If “Run and Debug” is not yet configured (no launch.json has been created in the .vscode folder), VS Code shows the Run start view.

  • The folder

If the .vscode is located in the .gitignore file and anyone who wants to enable a debugger will have to create a lunch.json

Picture 10

  1. Click

Run and Debug button and VS code will open Select environment menu

Picture 11

VS Code will try to automatically detect your debug environment, but if this fails, you will have to choose it manually.

  1. Select

Chrome environment to create launch.json file in .vscode folder

Here is the launch configuration generated for Chrome debugging:

{

"version": "0.2.0",

"configurations": [

{

"type": "pwa-chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:8080",

"webRoot": "${workspaceFolder}"

}

]

}

This file is created in .vscode folder and added the launch.json file to your workspace.

Picture 12

  1. Change the

URL for the route on which the application runs

Example:

{

"version": "0.2.0",

"configurations": [

{

"type": "pwa-chrome",

"request": "launch",

"name": "Launch Chrome against localhost",

"url": "http://localhost:8888",

"webRoot": "${workspaceFolder}"

}

]

}

  • If you run application from Reference Host App, URL in lunch.json file will be http://localhost:8888
  • If you run application from Landing Page, URL in lunch.json file will be http://localhost:5000

External web debugger for UI projects with Edge

To enable debugger for external UI with Edge, follow the same steps as for Chrome with small differences.

When click on Run and Debug button and VS code open Select environment menu.

For Edge select:

Picture 13

As specified by clicking on the environment, a lunch.json file will be created in the .vscode folder.

Here is the launch configuration generated for Edge debugging:

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"type": "pwa-msedge",

"request": "launch",

"name": "Launch Edge against localhost",

"url": "http://localhost:8080",

"webRoot": "${workspaceFolder}"

}

]

}