作者:手机用户2602935395 | 来源:互联网 | 2023-02-13 13:20
My 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..
6
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静态查找相应的入口点.
最小的例子
我用最小配置和更多解释创建了一个repo.
1> kube..:
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静态查找相应的入口点.
最小的例子
我用最小配置和更多解释创建了一个repo.