我的 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'
}
}
最佳答案
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使用最少的配置和更多的解释。
关于debugging - Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41965355/