与 Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试
Posted
技术标签:
【中文标题】与 Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试【英文标题】:VSCode debugging of Node or Electron Main Process bundled with Webpack 【发布时间】:2017-06-17 08:21:58 【问题描述】:我的 Electron 主进程是用 TypeScript 和捆绑的 Webpack 2 编写的。
转译是通过ts-loader
和babel-loader
完成的。
开发模式以webpack --watch
开头,main process configuration。
问题
我无法使用 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'
【问题讨论】:
【参考方案1】:VSCode 配置
重要的是把源文件作为程序的入口点给VSCode,并在"program"
键中指定。
你还需要在"outFiles"
中指定Webpack生成的bundle。
"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。
【讨论】:
我不得不使用"program": "$workspaceRoot/dist/main.js"
而不是打字稿文件。此外,端口不同:electron ./dist --serve --debug=3068
【参考方案2】:
我不知道这是否可能,但--remote-debugging-port=9222
用于 v8-inspector 协议,Electron Node 尚不支持 (https://github.com/electron/electron/issues/6634)。
由于这是一个启动配置,VS Code 会将--debug=5858
传递给运行时,因此您无需在此处指定端口。也许尝试添加--nolazy
。希望对您有所帮助。
【讨论】:
刚刚发现如何实现这一点。事实上,我认为--no-lazy
标志是默认通过的。但你对调试端口是正确的。以上是关于与 Webpack 捆绑的 Node 或 Electron 主进程的 VSCode 调试的主要内容,如果未能解决你的问题,请参考以下文章
如何选择 node_modules dist 风格与 webpack 捆绑
如何选择与webpack捆绑的node_modules dist flavor
如何将 NewRelic 集成到与 Webpack 捆绑的 Node Typescript Express 服务器中?