Debugging JavaScript with VSC and Live Server

debugging_javascript_vsc_live_server.md

Debugging Frontend with Chrome and Visual Studio Code

This recipe configures VSC to debug a frontend in Chrome in JavaScript (not TypeScript) running locally (not in a Docker).

Software prerequisites:

• Visual Studio Code: it has a buit-in debugger;

• Live Server: extension for VSC to serve web pages;

• Google Chrome: the browser to test in.

The folder estructure is as follows:

workspace_root
 |
 +- web_experiment_1
 |
 +- web_experiment_2

Each of these folders contain a web example and constitutes a web root.

Configuring Live Server

Since the workspace has several web roots, Live Server must be configured to serve one of those roots. Add to the configuration the following entry:

{
  "liveServer.settings.root": "/workspace_root/web_experiment_1"
}

Configuring the VSC Debugger

At the debug section of VSC, create a new configuration:

{
  "type": "pwa-chrome",
  "request": "launch",
  "name": "React Experiments",
  "url": "http://localhost:5500",
  "webRoot": "${workspaceFolder}/workspace_root/web_experiment_1",
  "stopOnEntry": true,
  "sourceMaps": true
}

The URL port must be the one used by Live Server.

The debugger is ready to launch, able to set breakpoints in JavaScript code and to launch Chrome. It also features reloading. The VSC debug console also displays messages.