文档章节

electron调试攻略

 细节探索者
发布于 2017/07/29 10:51
字数 925
阅读 246
收藏 0

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配置界面

  • electron调试界面

electron调试界面

渲染进程调试

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

mainWindow.webContents.openDevTools()

参考文档

快速入门

主进调试

Getting started with Electron in WebStorm

安装electron环境

© 著作权归作者所有

上一篇: electron资源帖
下一篇: 博客目录
粉丝 24
博文 281
码字总数 351365
作品 0
杭州
程序员
私信 提问
一口气完成electron的入门学习

介绍 目前,使用前端技术开发桌面应用已经越来越成熟,这使得前端同学也可以参与桌面应用的开发。目前类似的工具有electron,NW.js等。这里我们着重介绍下electron。 electron开发 electron...

chenhao_ch
2017/11/29
0
0
Electron打包exe的使用

关于Electron 基于HTML5的跨平台技术比较出名的有 PhoneGap、Cordova,常常用于开发webapp,还有Egret、Cocos-creator、Unity等,常用于开发游戏;还有基于node的nw.js,用于开发桌面应用,以...

会飞的猪l
2018/10/23
0
0
使用Electron构建React+Webpack桌面应用

前言 Electron可以使用HTML、CSS、JavaScript构建跨平台桌面应用,可是在使用到React和Webpack时,会遇到一些配置问题,本文将针对React+Webpack下的Electron配置提供一个通用的解决方案。 ...

VoyagerOne
2017/12/15
0
0
开发一个React + Electron应用

最近用React + Electron开发了一个RSS阅读器,开源在:github.com/breeze2/bre…,这里记录一下大致的开发过程。 初始化 创建项目 以普通的React应用做基础,一步步初始化项目。预先安装yar...

breeze
03/10
0
0
Electron 从零创建一个 Windows/OS X/Linux 的桌面可执行程序

序 每次 Electron 有最新新闻的时候,都会有很多朋友留言,问有没有相关教程,本人也是观察有一段时间了,一直鲜有人提供相关的学习内容,所以在此就给大家提供下一些入门和进阶教程,希望大...

倚楼听风雨_
2016/09/26
0
65

没有更多内容

加载失败,请刷新页面

加载更多

数据库

数据库架构 数据库架构可以分为存储文件系统和程序实例两大块,而程序实例根据不同的功能又可以分为如下小模块。 1550644570798 索引模块 常见的问题有: 为什么要使用索引 什么样的信息能成...

一只小青蛙
今天
4
0
PHP常用经典算法实现

<? //-------------------- // 基本数据结构算法 //-------------------- //二分查找(数组里查找某个元素) function bin_sch($array, $low, $high, $k){ if ( $low <= $high){ $mid = int......

半缘修道半缘君丶
昨天
5
0
GIL 已经被杀死了么?

本文原创并首发于公众号【Python猫】,未经授权,请勿转载。 原文地址:https://mp.weixin.qq.com/s/8KvQemz0SWq2hw-2aBPv2Q 花下猫语: Python 中最广为人诟病的一点,大概就是它的 GIL 了。...

豌豆花下猫
昨天
5
0
git commit message form

commit message一般包括3部分:Header、Body、Footer。 <type>(<scope>):<subject>blank line<body>blank line<footer> header是必需的,body、footer可以省略。 header中type、subject......

ninjaFrog
昨天
5
0
聊聊Elasticsearch的CircuitBreakerService

序 本文主要研究一下Elasticsearch的CircuitBreakerService CircuitBreakerService elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/indices/breaker/CircuitBreakerService.ja......

go4it
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部