VS Code - Debug node project and javascript client side

A small project to show how to debug a node project and javascript client side in the same time with Visual Studio Code in Google Chrome browser

As a bonus, sample code is using webpack in watch mode to recompile client side on change withour relaunching debug mode.

Mandatory tools

Visual Studio Code
Extension Debugger for Chrome (sources)

Launch.json

This config is running a script described in package.json with npm, and then chrome is launching with the specified url:

{
    "version": "0.2.0",
    "configurations": [
      {
        "name": "Launch via NPM",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "npm",
        "runtimeArgs": [
            "run-script", "debug"
        ],
        "sourceMaps": true,
        "smartStep": true,
        "port": 5858,
        "skipFiles": [
            "node_modules/**"
        ]
      },
      {
        "name": "Chrome",
        "type": "chrome",
        "request": "launch",
        "webRoot": "${workspaceRoot}",
        "url": "http://localhost:3000",
        "userDataDir": "${workspaceRoot}/.vscode/chrome",
        "sourceMaps": true,
        "smartStep": true,
        "internalConsoleOptions": "openOnSessionStart",
        "skipFiles": [
            "node_modules/**"
        ],
        "sourceMapPathOverrides": {
            "webpack:///*": "${webRoot}/*"
        }
      },
      {
        "type": "chrome",
        "request": "attach",
        "name": "Attach Chrome",
        "port": 9222,
        "webRoot": "${workspaceRoot}",
        "sourceMaps": true,
        "smartStep": true,
        "internalConsoleOptions": "openOnSessionStart",
        "skipFiles": [
            "node_modules/**"
        ],
        "sourceMapPathOverrides": {
            "webpack:///*": "${webRoot}/*"
        }
      }
    ],
    "compounds": [
      {
        "name": "Node + Client",
        "configurations": ["Launch via NPM", "Chrome"]
      }
    ]
}

You can easily switch to "Attach Chrome" instead of launching Chrome each time. But in order to make it work, you first have to launch Chrome in debug mode:

Windows

Right click the Chrome shortcut, and select properties
In the "target" field, append --remote-debugging-port=9222
Or in a command prompt, execute <path to chrome>/chrome.exe --remote-debugging-port=9222

macOS

In a terminal, execute /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --remote-debugging-port=9222

Linux