Electron-Vue之支持主进程调试
使用Vue开发Electron程序时,如果不能调试,只用log,会非常痛苦。具体配置,可以参照Vue CLI Plugin Electron Builder中的Debugging With VSCode。Enable Sourcemapsmodule.exports = {configureWebpack: {devtool: 'source-map'}}A...
·
使用Vue开发Electron程序时,如果不能调试,只用log,会非常痛苦。
具体配置,可以参照Vue CLI Plugin Electron Builder中的Debugging With VSCode。
- Enable Sourcemaps
module.exports = {
configureWebpack: {
devtool: 'source-map'
}
}
- Add Debug Task
Add the electron-debug task to .vscode/tasks.json, which will start the Electron dev server in debug mode:
{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "2.0.0",
"tasks": [
{
"label": "electron-debug",
"type": "process",
"command": "./node_modules/.bin/vue-cli-service",
"windows": {
"command": "./node_modules/.bin/vue-cli-service.cmd"
},
"isBackground": true,
"args": ["electron:serve", "--debug"],
"problemMatcher": {
"owner": "custom",
"pattern": {
"regexp": ""
},
"background": {
"beginsPattern": "Starting development server\\.\\.\\.",
"endsPattern": "Not launching electron as debug argument was passed\\."
}
}
}
]
}
- Add Debugging Configurations
Add Electron: Main, Electron: Renderer, and Electron: All debug configurations to .vscode/launch.json:
{
"version": "0.2.0",
"configurations": [
{
"name": "Electron: Main",
"type": "node",
"request": "launch",
"protocol": "inspector",
"runtimeExecutable": "${workspaceRoot}/node_modules/electron/dist/electron.exe",
"windows": {
"runtimeExecutable": "${workspaceRoot}/node_modules/electron/dist/electron.exe"
},
"preLaunchTask": "electron-debug",
"args": ["--remote-debugging-port=9223", "./dist_electron"],
"outFiles": ["${workspaceFolder}/dist_electron/**/*.js"]
},
{
"name": "Electron: Renderer",
"type": "chrome",
"request": "attach",
"port": 9223,
"urlFilter": "http://localhost:*",
"timeout": 30000,
"webRoot": "${workspaceFolder}/src",
"sourceMapPathOverrides": {
"webpack:///./src/*": "${webRoot}/*"
}
}
],
"compounds": [
{
"name": "Electron: All",
"configurations": ["Electron: Main", "Electron: Renderer"]
}
]
}
runtimeExecutable": “${workspaceRoot}/node_modules/electron/dist/electron.exe”,
这里根据Electron的实际位置进行了调整。
- VsCode调试界面,增加node.js配置文件,会自动生成laungh.json文件,将上述的laungh.json文件内容,覆盖默认生成的即可。然后选中Electron:All方式,按F5进行调试。
注意事项:
调试时,如果在Debug界面-BreakPoints栏,选中AllExceptions和UncaughtExceptions时,会导致异常。
这个问题,有可能通过修改skipFiles or smartStep配置能解决,目前还未进行尝试。
更多推荐
已为社区贡献1条内容
所有评论(0)