electron-vue开发笔记（4）main进程断点调试vscode配置

准备写个系列，先把flag立上～

vscode 调试

首先看下vscode的调试配置，参考官网。

配置

在调试页面点击添加 Add Configuration
选择Node.js，会自动创建.vscode/路径下的launch.js文件。

点击右下角新建“Electron Main”类型的configuration或者复制以下代码：

{
    "name": "Electron Main",
    "program": "${workspaceFolder}/.electron-vue/dev-runner.js",
    "request": "launch",
    "skipFiles": [
        "<node_internals>/**"
    ],
    "type": "node",
    "autoAttachChildProcesses": true
}

main进程开启符号表修改.electron-vue/webpack.main.config.js文件，添加

  devtool: "source-map",

效果

按F5或者侧边栏调试进入debug模式了，通过启动调试进程将electron进程attach上，运行后可以在terminal看到这两个进程。

断点也可以正常触发，也可以在console进行一些调试工作。

报错解决

问题1 Error: spawn XXX EACCEs

解决方案

感觉是文件权限问题，把工程下得文件直接chmod 777 就好了。

问题2 TypeError: Cannot read property 'endsWith' of undefined

解决方案

把 .electron-vue/dev-runner.js 里以下报错代码注释掉。

// // detect yarn or npm and process commandline args accordingly
// if (process.env.npm_execpath.endsWith('yarn.js')) {
//   args = args.concat(process.argv.slice(3))
// } else if (process.env.npm_execpath.endsWith('npm-cli.js')) {
//   args = args.concat(process.argv.slice(2))
// }

Happy Ending

Github源码

electron-vue开发笔记（4）main进程断点调试vscode配置

vscode 调试

配置

效果

报错解决

问题1 Error: spawn XXX EACCEs

解决方案

问题2 TypeError: Cannot read property 'endsWith' of undefined

解决方案

Happy Ending

参考文档