debugging - Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试

Question

我的 Electron 主进程是用 TypeScript 和捆绑的 Webpack 2 编写的。

转译是通过 ts-loader 和 babel-loader 完成的。

开发模式以 main process configuration 启动 webpack --watch .

问题

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

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

配置

.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 配置中，您需要指定要在源映射中写入模块源文件的完整路径。

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

还要小心选择未评估的 sourcemap，以允许 VSCode 静态找到相应的入口点。

最小示例

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