python与Electron联合编程记录之六(Electron调试)

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、调试主进程

  你需要通过调试主进程来了解程序启动的时候发生了什么。
  在主工具栏的运行/调试配置或者菜单栏的运行中选择编辑配置选项，在弹出的对话框左上角点击加号添加新配置，具体配置菜单如下所示：

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

2、调试渲染进程

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

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

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