苏南大叔继续描述vscode断点调试electron程序的事情,在本篇文章中,quick-start的程序,稍稍升级了点:语法上用到了es6的语法。那么这样的electron程序,如何使用vscode进行调试呢?既然单独成文,肯定是有特殊之处。那么,对于这种使用了es6语法的electron该如何处理呢?

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - electron-es6-debug
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-1)

本文的测试环境是:mac/vscode1.30.1/quick-start-es6

quick-start-es6代码

es6版的quick-start和原版的quick-start基本上是一致的。只不过是在renderer.js中,使用了import这个语法。对于electron来说,直接electron .是没用任何问题,可以完美识别所有的es6语法的。但是,在vscode中,如果按照普通的electron程序进行调试的话,就会有报错。

本文的特约嘉宾es6版本的quick-start来自下面的仓库:

这个es6版本的quick-start,普通版本的quick-start相比,主要区别就是:renderer.js是个import版本的,同时利用babelwebpack,对js做了es2015级别的转码。

下面的截图利用winmerge对比完成,对比的对象就是quick-start的普通版和es6版本:

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - winmerge-results
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-2)

helper.js:

export function sayHello(target) {
  console.log(`hello ${target}!`)
}

renderer.js:

import { sayHello } from './helper.js';
sayHello('world')

还有个主要区别是:es6版本的quick-start起了个本地4000端口的server

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - 不同点
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-3)

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - 不同点2
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-4)

quick-start-es6debug范例如何运行

这个vscodees6版本调试,如果想正确运行,重要的就两点:

  • 修改.vscode/launch.json文件,修改的主要标准就是:renderer的端口号相关设置。

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - es6-qucik-start-launch
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-5)

  • debug之前,请先运行npm run dev,才能正常使用vscode进行调试。

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - es6-queick-start-run-dev
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-6)

如果满足了上述两点条件,就可以顺利地通过vscode调试es6版本的electron-quick-start程序了~

苏南大叔: es6 版 electron 程序 vscode 调试,quick-start 范例 - es6-quick-start
es6 版 electron 程序 vscode 调试,quick-start 范例(图7-7)

总结

这个es6版本的electron-quick-start的调试,果然是有些不走寻常路的。那么,本文侧重于实战,运行debug的方法总结。

下一篇文章中,将对这个es6版本的运行调试进行原理总结分析,敬请期待苏南大叔提供的,后续electron调试相关经验文章:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

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

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

本站的忠实读者小伙伴,正在阅读下面这些文章: