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,然后点击调试按钮,在调试工具窗口的进程控制台选项卡中点击刚刚设置的监听端口。
此时,在渲染进程中设置断点可以进行调试,或者在调试工具窗口中点击暂停按钮可以实现自动跳转调试。