使用VSCode调试经过Webpack打包的Node或Electron主进程

Question

我的Electron主进程是用TypeScript编写并使用Webpack 2打包。

通过ts-loader和babel-loader进行转译。

开发模式下使用主进程配置文件的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'
  }
}

- kube

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

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

同时要注意选择一个未被评估的源映射，以便VSCode能够静态地找到相应的入口点。

最小示例

我创建了一个存储库，其中包含最小的配置和更多的说明。

- kube

---

我不得不使用 "program": "${workspaceRoot}/dist/main.js" 而不是 TypeScript 文件。此外，端口不同：electron ./dist --serve --debug=3068。 - Matthias Sommer

Answer 2

我不知道这是否可能，但是--remote-debugging-port=9222用于v8-inspector协议，而Electron Node尚未支持该协议(https://github.com/electron/electron/issues/6634)。

由于这是启动配置，VS Code将向运行时传递--debug=5858，因此您无需在此处指定端口。可以尝试添加--nolazy。希望这能帮助到您。

- Rob Lourens

---

刚刚发现如何实现这个。事实上，我认为 --no-lazy 标志默认已经传递了。但是你关于调试端口的说法是正确的。 - kube