VSCode debugging of Node or Electron Main Process bundled with Webpack

Question

My Electron main process is written with TypeScript and bundled Webpack 2.

Transpilation is done through ts-loader and babel-loader.

Development mode starts webpack --watch with the main process configuration.

Problem

I cannot debug the main process using VSCode debugger.

Adding a breakpoint in the entry point src/main/index.ts does not have any effect.

Configuration

.vscode/launch.js

{
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
      "runtimeArgs": [
        "${workspaceRoot}",
        "--remote-debugging-port=9222"
      ],
      "sourceMaps": true
    }
  ]
}

webpack.development.js

{
  target: 'electron',
  devtool: 'source-map',

  entry: {
    main: join(__dirname, 'src/main/index')
  },

  output: {
    path: join(__dirname, 'app'),
    filename: '[name].js'
  }
}

Answer 1

VSCode configuration

The important thing is to give VSCode the source file which is the entry point of the program, and specify it in "program" key.

You also need to specify in "outFiles" the bundle generated by Webpack.

{
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",

      // This is the important stuff
      "program": "${workspaceRoot}/src/main/index.ts"
      "outFiles": [
        "${workspaceRoot}/app/main.js"
      ],
      "sourceMaps": true
    }
  ]
}

Webpack configuration

In your Webpack config you need to specify that you want to write the full paths of the modules source files in your sourcemaps.

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

Also be careful to choose a sourcemap that is not evaluated, to permit VSCode to find the corresponding entry-point statically.

Minimal example

I created a repo with the minimal configuration and more explanations.

Answer 2

I don't know whether it's possible or not, but --remote-debugging-port=9222 is for the v8-inspector protocol, which isn't supported by Electron Node yet (https://github.com/electron/electron/issues/6634).

Since this is a launch config, VS Code will pass --debug=5858 to the runtime, so you don't need to specify a port here. Maybe try adding --nolazy. Hope that helps.