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

对于vscode调试electron这件事来说,区别于9222端口的渲染进程调试方式,这里存在着一个5858端口的主进程调试方案。这个5858端口方案的调试,是非常的与众不同,与以往的electron的调试方案差别很大。本文,就着重说一下这个electron5858主进程方案是如何使用的。

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

本文测试环境:mac/electron3.0.7/vscode1.30.1

配置.vscode/launch.json

.vscode/launch.json文件配置如下:

苏南大叔:vscode 如何断点调试 electron 程序?主进程 attach 调试 - launch-attach
vscode 如何断点调试 electron 程序?主进程 attach 调试(图4-2)

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

其中的sourceMaps建议设置为true,可以用于调试es6的代码。被注释掉的几条设置,貌似也没什么用,而且添加上总是有报错。

命令行启动electron

最正确的命令方式是:

./node_modules/.bin/electron --inspect-brk=5858 ./

会有如下提示信息:

Debugger listening on ws://127.0.0.1:5858/8885afaa-a26b-4a19-9ac0-693b0aec8d32
For help, see: https://nodejs.org/en/docs/inspector

苏南大叔:vscode 如何断点调试 electron 程序?主进程 attach 调试 - commandline-inspect
vscode 如何断点调试 electron 程序?主进程 attach 调试(图4-3)

其中关于--inspect-brk,会有其他的表述。

  • 比如:--debug--debug-brk。这两个是废弃的参数,新版的electron早就不支持这2个参数了。
  • --inspect--inspect-brk的区别就在于:--inspect-brk是必须attach后,f5一下才进入调试的。--inspect并不是。

vscode执行attach

执行定义在.vscode/launch.json中的attach,进入调试模式。如果使用的是--inspect-brk的话,需要先按一下f5,才能继续。调试的时候,对于使用了es6的代码,需要先babel,然后生成sourceMap,然后配置sourceMapstrue,才能正常调试。这个思路可以参见苏南大叔的前几篇文章。

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

注意:主动按f5!

vscode停止调试

常规的vscode停止调试,在这个方案中是不起作用的。仅仅是停止了attach而已,electron程序自身还存在,需要在命令行里面使用ctrl+c才能停止这个被调试的electron程序。

总结

vscodeelectron的故事,讲了这么多,基本上也算可以告一段落了。electron-vue的调试,基本上也逃不出这个范围,关键点就这么几个:babelsourcemap。其余的,采用那种调试方案,这个就是仁者见仁智者见智的事情了。

使用attach方案的时候,根本不关心是不是es6,是不是需要babel,执行的是哪个文件。因为,那是另外开启的命令行所考虑的事情,在.vscode/launch.json中是并不体现这些设置信息的。

更多electron的经验文字,苏南大叔提示您:请点击下面的链接查看。

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

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

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

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