VSCode TypeScript Webpack Node Debug Example

A minimal setup for VSCode debug of NodeJS programs written in TypeScript and bundled using Webpack > 2.

This example also works for debugging the Electron Main Process.

TypeScript configuration

Enable sourceMap in tsconfig.json:

{
  "compilerOptions": {
    "sourceMap": true
  }
}

Webpack configuration

Sourcemaps

Enable sourcemaps in your Webpack configuration:

{
  devtool: 'cheap-source-map'
}

My personal pick is cheap-source-map, but you can check all available source-maps here.

All eval-based source maps won't work.

Sourcemaps Modules Absolute Paths

This will output the absolute path of your source files in the sourcemaps:

{
  output: {
    devtoolModuleFilenameTemplate: '[absolute-resource-path]'
  }
}

VSCode configuration

You need to create a launch.json in the .vscode folder at the root of your project.

{
  "configurations": [
    {
      "name": "Launch Program",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "program": "${workspaceRoot}/src/index.ts",
      "outFiles": [
        "${workspaceRoot}/dist/bundle.js"
      ],
      "sourceMaps": true
    }
  ]
}

Specify in "program" the source file corresponding to the entry-point of your program.

In "outFiles" specify the path to the bundle generated by Webpack.

Set "sourceMaps" to true.

Example

Clone this repo to test the debug and check the configuration:

git clone https://github.com/kube/vscode-ts-webpack-node-debug-example
cd vscode-ts-webpack-node-debug-example
npm install

Now:

• Open the folder in VSCode
• Place some breakpoints in the source code in src/
• Build the project using ⌘ + ⇧ + B
• Start debugging using F5

Enjoy.