electron调试攻略

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调试

入坑小记一

  1. electron的安装环境有 electron-prebulit迁移到electron名称下。参考安装electron环境,所以在开发前请明确你的安装版本。
  2. electron有全局安装和局部安装之分,不同的安装方式在系统中的调用是不相同的,所以在开发前请明确你的安装方式。
  3. 在正式调试electron项目前,请明确IntelliJ IDEA 是否安装NodeJS的运行环境。
  4. 配置IntelliJ IDEA的调试界面
  • 安装NodeJs插件包

安装NodeJs插件包

  • electronDebugger配置界面

electronDebugger配置界面

扫描二维码关注公众号,回复: 129716 查看本文章
  • electron调试界面

electron调试界面

渲染进程调试

渲染进程是基于chromium浏览器的进程。所有渲染进程的调试采用chromium浏览器的调试工具就行了。 使用下面这句话开启渲染进程的调试。

mainWindow.webContents.openDevTools()

参考文档

快速入门

主进调试

Getting started with Electron in WebStorm

安装electron环境

猜你喜欢

转载自my.oschina.net/u/3421984/blog/1491952