Pycharm调试Electron

  程序的编写过程离不开调试,在刚开始编写Electron程序的时候我不懂怎么调试主进程,只会通过Chrome的Devtools调试渲染进程,所以程序编写过程非常苦恼。后来决定研究下怎么调试主进程,我使用的是Pycharm,Electron官网并没有给予Jetbrains的IDE详细的说明,只是说明了VSCode如何来调试Electron程序。
  但是有如下几个网站可以参考:
  WebStorm官网关于Node.js的运行和调试说明   Node.js官网的调试指南   WebStorm官网关于Electron的入门开发说明   上述两个网站可以解决大部分Electron程序的调试配置问题。
  Electron 应用进程分为主进程和渲染进程,其底层实现分别对应于 Node.js 和 Chromium。所以调试 Electron 应用的方式也基本等价于这两者的结合。
  下面我将以Pycharm为例说明如何配置调试Electron程序调试,Jetbrains的IDE只要可以安装Node.js插件包的应该都可以参考此方法进行配置。

1、调试主进程

  你需要通过调试主进程来了解程序启动的时候发生了什么。

  在主工具栏的运行/调试配置或者菜单栏的运行中选择编辑配置选项,在弹出的对话框左上角点击加号添加新配置,具体配置菜单如下所示:

electron 调用Python exe electron 调用 python_python

  名称这里我填写的是Debug Main Process方便辨识,你可以随意起名字。
  其中节点解释器在node modules项目里的*.bin*文件夹里面,对于Windows平台来说是electron.cmd,对于Linux和macOS来说是electron
  节点形参这里填写.(因为需要运行electron .来启动程序)。
  工作目录填写程序主目录。
  保存配置,设置断点,点击工具栏中的调试按钮即可。
  点击运行按钮,可以同样达到运行npm脚本的作用。

2、调试渲染进程

  复制一份主进程调试配置,名称修改为Debug Render Process,应用程序形参中填写--remote-debugging-port=9222(port端口可以任意填写)并保存。

electron 调用Python exe electron 调用 python_调试_02

  将配置切换到Debug Render Process,然后点击调试按钮,在调试工具窗口的进程控制台选项卡中点击刚刚设置的监听端口。

electron 调用Python exe electron 调用 python_pycharm_03

  此时,在渲染进程中设置断点可以进行调试,或者在调试工具窗口中点击暂停按钮可以实现自动跳转调试。