与Webpack捆绑在一起的Node或Electron Main Process的VSCode调试

Question

My Electron主进程使用TypeScript和捆绑的Webpack 2编写。

通过ts-loader和babel-loader进行脱毛。

开发模式使用webpack --watch启动main process configuration。

Problem

我无法使用VSCode调试器调试主进程。

在入口点src/main/index.ts中添加断点没有任何影响。

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配置

重要的是给VSCode提供源文件，该文件是程序的入口点，并在"program"密钥中指定它。

您还需要在"outFiles"中指定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配置

在Webpack配置中，您需要指定要在源映射中编写模块源文件的完整路径。

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

另外要注意选择未评估的源映射，以允许VSCode静态查找相应的入口点。

最小的例子

我用最小配置和更多解释创建了a repo。

Answer 2

我不知道它是否可能，但是--remote-debugging-port=9222是针对v8-inspector协议的，而电子节点尚未支持（https://github.com/electron/electron/issues/6634）。

由于这是一个启动配置，VS Code会将--debug=5858传递给运行时，因此您无需在此处指定端口。也许尝试添加--nolazy。希望有所帮助。