Debugging with VS Code

README.md

VS Code: Debugging

The way we usually debug JavaScript code, is through a web browser and typing the keyword debugger or console.log in our files, but switching between browser and VS Code can be annoying, and we also lose synchronization with the source code.

VS Code provides the extension Debugger for Chrome which enables you to edit, debug, and set breakpoints to your JavaScript application without leaving VS Code!

Getting started

VS Code currently auto-detects tasks for the following systems: npm, gulp, Grunt, and Jake. If you develop a JavaScript application using Node.js as the runtime, you usually have a package.json file describing your dependencies and the scripts to run.

The files tasks.json and launch.json located in the .vscode folder contain the configurations needed to launch tasks and start debugging sessions.

tasks.json

For my particular case, I want to debug the application in development mode, so the first step is to run the script that build the application and start the dev-server. To achieve that, I run the "start:dev" script in package.json.

{
  "version": "2.0.0",
  "tasks": [
    {
      "type": "npm",
      "label": "Start dev-server",
      "group": { "kind": "build", "isDefault": true },
      "script": "start:dev",
      "problemMatcher": [],
    },
    ...
  ]
}

To launch the task, just press Ctrl + Shift + B, or click on the menu Terminal → Run Build Task.

Read more details about VS Code Tasks and Tasks in action.

launch.json

Having configured the task to start the dev-server, we proceed to configure the VS Code debugger. To do that just add the following configs to .vscode/launch.json. The former configuration is to watch and start a debugging session using the Debugger for Chrome extension. The other configuration is to start a debugging session with Node.js

{
  "version": "1.0.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Chrome: watch localhost",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src",
      "skipFiles": ["node_modules"],
      "disableNetworkCache": true,
      "showAsyncStacks": true,
      //"sourceMaps": false
      //"trace": true
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Node: current file",
      "program": "${workspaceFolder}/${relativeFile}",
      "cwd": "${workspaceFolder}"
    }
  ]
}

See more details about Debugging in VS Code and Node.js debugging in VS Code.

Start debugging

Remember to have installed the Debugger for Chrome extension and start the dev-server by pressing Ctrl + Shift + B, or clicking on the menu Terminal → Run Build Task.

1. Open the JavaScript file (*.js, *.ts) you want to debug.
2. Set breakpoints or the debugger statement where you want to stop.
3. Press Ctrl + Shift + D, or click on the Debug icon in the left panel.
   • Select DEBUG ‣ Chrome: watch localhost to debug a browser app.
   • Select DEBUG ‣ Node: current file to debug a Node file.
4. Press F5 to start a debugging session.

If for any reason the breakpoints don't work, try the following:

1. Right click on the BREAKPOINTS panel and select Reapply All Breakpoints.
2. Restart session by pressing Ctrl + Shift + F5, or click on the menu Debug → Restart Debugging.

debug-workflow.png

https://marketplace.visualstudio.com/items?itemName=msjsdiag.debugger-for-chrome
now shows as "Deprecated".

Ran into that as well. It was a great idea, but it didn't run.