electron主进程和渲染进程的调试

主进程和渲染进程

主进程

在 Electron 里，运行 package.json 里 main 脚本的进程被称为主进程。在主进程运行的脚本可以以创建 web 页面的形式展示 GUI。

渲染进程

由于 Electron 使用 Chromium 来展示页面，所以 Chromium 的多进程结构也被充分利用。每个 Electron 的页面都在运行着自己的进程，这样的进程我们称之为渲染进程。
在一般浏览器中，网页通常会在沙盒环境下运行，并且不允许访问原生资源。然而，Electron 用户拥有在网页中调用 io.js 的 APIs 的能力，可以与底层操作系统直接交互。

主进程与渲染进程的区别

主进程使用 BrowserWindow 实例创建网页。每个 BrowserWindow 实例都在自己的渲染进程里运行着一个网页。当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的，并且只关心他们自己的网页。
由于在网页里管理原生 GUI 资源是非常危险而且容易造成资源泄露，所以在网页面调用 GUI 相关的 APIs 是不被允许的。如果你想在网页里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。
在 Electron，我们提供用于在主进程与渲染进程之间通讯的 ipc 模块。并且也有一个远程进程调用风格的通讯模块 remote。

渲染进程调试

渲染进程 渲染进程调试就是熟悉的网页调试。

• 弹框界面：view > toggle developer tools

主进程调试

1. 根目录下添加一个 .vscode/launch.json 文件并使用以下配置：

   {
       "version": "0.2.0",
       "configurations": [
           {
               "name": "Debug Main Process",
               "type": "node",
               "request": "launch",
               "cwd": "${workspaceRoot}",
               "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
               "windows": {
                   "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
               },
               "args": ["."],
               "outputCapture": "std"
           }
       ]
   }
   

   

2. 点击vscode左侧的debug，然后点击右上角的设置，会打开新建的文件
   

3. 然后点击左上角的运行
   

4. 在main.js主进程中进行断点调试即可