Repository files navigation

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

This example also works for debugging the ElectronMain Process.

Enable sourceMap intsconfig.json:

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

Enable sourcemaps in your Webpack configuration:

{devtool:'cheap-source-map'}

My personal pick ischeap-source-map, but you can check all available source-mapshere.

All eval-based source maps won't work.

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

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

You need to create alaunch.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" thesource file corresponding to the entry-point of your program.

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

Set"sourceMaps" totrue.

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

git clone https://github.com/kube/vscode-ts-webpack-node-debug-examplecd vscode-ts-webpack-node-debug-examplenpm install

Now:

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

Enjoy.