我们相信:世界是美好的,你是我也是。平行空间的世界里面,不同版本的生活也在继续...

本文中,苏南大叔将要讲述一个终极问题:electron-vue如何调试?这个问题喋喋不休的讨论了好久了。是不是有答案?其实,苏南大叔也试了很久很久了。经过反复测试,终于找到了一个方案。当然,相信仅仅是其中一个方案罢了。最优化的方案是什么?如果大家有更好的方案,还可以留言给苏南大叔。

本文有关babel的转化,经过不断比较方案,苏南大叔个人觉得还是选用babel-register方案,做electron-vue的主进程调试方案比较合适。

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - electron-vue-vscode
vscode 如何断点调试 electron-vue 程序主进程?(图7-1)

vscode+electron+es6的组合有太多种可能,在本文中,苏南大叔讲述的是:electron-vue的主进程调试方案。本文是苏南大叔原创的方案,如果大家觉得本文方案有用,请给予鼓励和支持。谢谢。

electron-vue项目初始化

如何初始化electron-vue的事情,苏南大叔就不过多描述了。总之,您需要一个没有开启eslint功能的electron-vue项目源码。下面是一些相关链接:

关闭eslint的原因是:这个东西会引起太多莫名其妙的错误提示了,影响调试的效率。下面的文章里面,说明了如何关闭eslint功能:

安装babel相关依赖

electron-vue是铁定使用了es6相关语法的,所以,苏南大叔需要先安装一系列babel依赖项目。

npm i -D babel-core
npm i -D babel-loader
npm i -D babel-preset-es2015
npm i -D babel-preset-stage-0
npm i -D babel-register
npm i -D babel-plugin-transform-runtime

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - plugin-install
vscode 如何断点调试 electron-vue 程序主进程?(图7-2)

这个babel-plugin-transform-runtime,可以解决regeneratorRuntime is not defined的问题。

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - regenerator-runtime-error
vscode 如何断点调试 electron-vue 程序主进程?(图7-3)

与前几篇文章里面描述的有所不同的是:增加了一个新的依赖项babel-plugin-transform-runtime。与之对应的.babelrc文件也增加了个plugins的设置。需要的.babelrc最新设置是:

{
  "presets": [
    "es2015","stage-0"
  ],
  "plugins": ["transform-runtime"],
  "sourceMaps": true,
  "retainLines": true
}

合并.babelrc配置

但是,electron-vue中,已经存在.babelrc这个文件了。并且.babelrc里面已有的设置内容,和上一步中讲述的内容是有较大差别的。那么,这里就引入了一个.babelrc配置合并的概念。苏南大叔给上面的配置起了个名字,叫做debug。然后,把plugins这个设置选项放到了外面。

下面的是合并以后的.babelrc最新配置内容示意,注意里面有//...的省略部分:

newsn.net:这里是【评论】可见内容

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - babelrc-config
vscode 如何断点调试 electron-vue 程序主进程?(图7-4)

那么,如何区分这些babel的设置呢,就是靠BABEL_ENV这个环境变量参数来控制的。这个BABEL_ENVbabel里面的概念,就是说一个.babelrc文件里面定义很多个不同的babel方案,然后通过在命令行里面传递不同的BABEL_ENV来进行区分。

设置.vscode/launch.json

因为苏南大叔的选择是babel-register方案,为什么选择这个方案。主要是因为,实在没能找出通过已有的electron-vue内置方式,得到一个带sourcemap的方案。那么,通过以前文章里面,苏南大叔的相关描述。这个方案的注意事项,这里就不说明了,直接放出最终答案。

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - launch-json
vscode 如何断点调试 electron-vue 程序主进程?(图7-5)

图片里面的两个被画出波浪线的属性,也是已经被放弃的属性,直接删除即可。文字内容如下:

{
    {
        "name": "Launch",
        "type": "node",
        "request": "launch",
        "program": "${workspaceRoot}/src/main/index.dev.js",
        "stopOnEntry": false,
        "args": [],
        "cwd": "${workspaceRoot}",
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
        "runtimeArgs": [
            "--nolazy",
            "-r",
            "babel-register"
        ],
        "env": {
            "DEBUG_ENV": "debug",
            "BABEL_ENV": "debug",
        },
        "sourceMaps": false,
    },
    //...
}

唯一需要说明的是DEBUG_ENVBABEL_ENV

  • 前者DEBUG_ENV是由electron-vue的相关逻辑决定的。这个要求使用的是本地9080端口的调试模式。所以,这个时候,渲染进程的支撑是需要的。也就说,一定要启动一个9080本地服务器,用于支持调试。
  • 后者BABEL_ENV,这个是由定义在.babelrc里面的特殊env名字所决定的。不多说,大家都明白。

定义一个新的npm命令

正常情况下,需要先启动渲染进程的支持。但是,electron-vuescripts里面,却没有定义这里需要的单独的9080的进程。最接近真相的是:.electron-vue/dev-runner.js里面startRenderer()函数。

所以,这里仿照startRenderer()逻辑定义了一个新的scripts:

package.json:

"render": "webpack-dev-server --hot --colors --config .electron-vue/webpack.renderer.config.js --port 9080 --content-base app/dist",

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - render-scripts
vscode 如何断点调试 electron-vue 程序主进程?(图7-6)

调试过程

第一步

启动好本地服务器,用于支撑渲染进程。运行方式就是:

npm run render

第二步

vscode里面,点击主进程调试。在src/main/index.dev.jssrc/main/index.js文件中,下断点看效果即可。就可以愉快地调试electron-vue的主进程了。

苏南大叔:vscode 如何断点调试 electron-vue 程序主进程? - vscode-debug
vscode 如何断点调试 electron-vue 程序主进程?(图7-7)

题外话

经过上述一系列调整后,终于可以调试electron-vue的项目的主进程了,那是相当的不容易啊。

当然本文主要描述的是主进程调试,而关于9222的渲染进程调试。虽然经过不断组合试验,虽然正确的attach到了9222,但是相关的断点却不能被断上。所以,暂时大家还是使用开发者工具devtools进行调试吧。

newsn.net:这里是【作者】可见内容

总结

当然,因为vue也有专门的f12调试工具,这里不排除使用这个工具调试渲染进程的可能性。相关内容,请期待苏南大叔的后续文章。

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。

 【福利】 腾讯云最新爆款活动!1核2G云服务器首年50元!

 【源码】本文代码片段及相关软件,请点此获取更多信息

 【绝密】秘籍文章入口,仅传授于有缘之人   babel    electron