electron调试攻略
写在前面的话
通过对electron 快速入门的学习,可以得知electron是基于Node.js和Chromium浏览器两大技术实现的,因此我们的调试攻略可以分成两部分:主进程的调试和渲染进程的调试。如果您对主进程和渲染进程已经十分了解,可以直接阅读主进程和渲染进程的调试。
主进程
在electron里,运行package.json里main脚本的进程被称为主进程。在主进程运行的脚本可以创建web页面的形式展示GUI。
渲染进程
由于Electron使用chromium来展示页面,所有Chromiun的多进程结构也被充分利用。每个Electron的页面都在运行着自己的进程,这样的进程我们称之为渲染进程。 在一般浏览器中,网页通常会在沙盒环境下运行,并且不允许访问原生资源。然而,Electron用户拥有在网页中调用Node.js的API的能力,可以与底层操作系统直接交互。
主进程与渲染进程的区别
主进程使用BrowserWindow实例创建页面。每个BrowserWindow实例都在自己的渲染进程里面运行。当一个BrowserWindow实例被销毁后,相应的渲染进程也会被终止。
主进程管理所有页面和与之相对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的页面。
由于在页面里管理原生GUI资源是非常危险而且容易造成资源泄漏,所以在页面调用GUI相关的APIs是不被允许的。如果你想在网页里面使用GUI操作,其对应的渲染进程必须与主进程进行通讯,请求主进程进行相关的GUI操作。
在Electron,提供集中方法用于主进程和渲染进程之间的通讯。像 ipcRenderer 和ipcMain 模块用于发送消息,remote模块永夜RPC方式通讯。
主进程调试
electron中文社区非常体贴的提供了 主进调试 流程。包括命令行开关和外部调试器两部分。其中外部调试器包括VSCode进行主进程调试和node-inspector进行主进程调试。
由于本人开发习惯使用IntelliJ IDEA,故本攻略重点讲述IntelliJ IDEA 如何进行主进程调试。
IntelliJ IDEA调试
入坑小记一
- electron的安装环境有 electron-prebulit迁移到electron名称下。参考安装electron环境,所以在开发前请明确你的安装版本。
- electron有全局安装和局部安装之分,不同的安装方式在系统中的调用是不相同的,所以在开发前请明确你的安装方式。
- 在正式调试electron项目前,请明确IntelliJ IDEA 是否安装NodeJS的运行环境。
- 配置IntelliJ IDEA的调试界面
- 安装NodeJs插件包
- electronDebugger配置界面
- electron调试界面
渲染进程调试
渲染进程是基于chromium浏览器的进程。所有渲染进程的调试采用chromium浏览器的调试工具就行了。 使用下面这句话开启渲染进程的调试。
mainWindow.webContents.openDevTools()
参考文档
Getting started with Electron in WebStorm