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

由于篇幅限制,本文书接上回。对于普通的electron程序,使用vscode进行调试的时候,需要配置一个文件,叫做.vscode/launch.json。在官方的调试范例中,launch.json文件中,一共定义了两种调试模式。一个是用于调制主进程的,另外一个是用于调试渲染进程的。

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - vscode-electron-renderer
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-1)

配置好之后,主进程调试可以顺利被断点,但是渲染进程会报错。本文就是解决渲染进程断点调试的问题的。当然,这里需要说明的是,渲染进程的调试并不是完美的。即使本文中的问题都得到了解决,也是有天然的缺陷的。

vscode调试renderer报错信息

对于后者Debug Renderer Process,可能会出现下面的报错:

Configured debug type 'chrome' is not supported.

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - renderer-error
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-2)

解决方案

安装vscodechrome调试插件。

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - debuger-for-chrome-offical
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-3)

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - debuger-for-chrome-offical-2
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-4)

可以从上述页面调出vscode的插件安装界面,继续安装。但是,如果您的系统上安装了多个vscode。那么,就有唤醒到错误的vscode的概率。所以,苏南大叔个人建议您:打开目标vscode,手工安装debugger for chrome插件。

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - debug-for-chrome-install
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-5)

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - debugger-for-chrome-install-2
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-6)

顺利安装好debugger for chrome插件之后,别忙着试验调试渲染进程。因为是没有生效的,还是会看到一样的错误。生效的话还需要重启vscode!当然,正常重启vscode之后,您可能就会看到下面的这个错误了。

timeout错误

错误提示如下:

Cannot connect to runtime process, timeout after 10000 ms - (reason: Got a response from the target app, but no target pages found).

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - renderer-error-2
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-7)

解决这个问题的关键,还是要修改.vscode/launch.json文件。在定义的debug electron renderer节点中,端口号是有问题的。设置端口号,设置对了即可。不用修改timeout参数,怎么修改都不会有效果。这个渲染进程调试的端口号调试,是个非常大的话题。那么,苏南大叔在这里,就长话短说。两个端口号设置一致,一般就可以了!

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - render-port-timeout
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-8)

//...
      "runtimeArgs": [
        //...
        "--remote-debugging-port=9222"
      ],
      "port":"9222",
//...

--remote-debugging-port这个,是告诉electron程序,对外的调试端口号的。而port,是告诉外部vscode的调试进程,要监听哪个端口号的。听起来有些绕口,对吧?记住两个都设置一致就好了。默认端口号就是9222。不多说了,timeout的原因没有别的,就是端口号没有监听到而已。(可以检查的是:是不是开了两个electronrenderer调试?)

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - how-to-debug
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-9)

下面是苏南大叔提供的一点点小的经验,不一定正确,仅供参考:

  • mac下调试的时候,--remote-debugging-portport设置为一致就通过了测试。
  • win下调试的时候,把--remote-debugging-port这条参数删除了,就通过了测试。
  • 设置端口还有一条途径就是:在main.js里面,添加如下语句。(仅为仅为保留项目,不建议使用)。
app.commandLine.appendSwitch('remote-debugging-port', '9222');

这个9222到底是在代码里面设置,还是在命令行里面设置,其实,也是有些混乱的。下面的链接里面有个更权威的说明。

渲染进程调试的缺陷

这个vscode的渲染进程调试,缺陷就在于:attach是需要时间的,也许仅仅只有一秒,但是没准已经渲染完成了,这就是个伤心的结局。也就是说,很有可能发生的事情是:首页的断点是断不上的,而延迟几秒的断点是可以断上的,其它页面的断点也是可以断上的。在主进程中,很好用的stopOnEntry参数,在这边也是不能使用的。

至少在苏南大叔调试的时候,上述问题还是存在的。如果您知道如何避免这个事情,可以留言给我。谢谢。

苏南大叔:vscode 如何断点调试普通 electron 程序?渲染进程调试篇 - how-to-debug-2
vscode 如何断点调试普通 electron 程序?渲染进程调试篇(图10-10)

完整的launch.json

综上所述,完整的launch.json如下所示:

seosn.com:这里是【评论】可见内容

结束语

更多electron的相关文章,请点击苏南大叔的博客。

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

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

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

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