Electron踩坑系列——【二】调试

【本系列文章基于Electron 9.0.3 版本，开发平台为windows】

Electron 应用进程分为主进程和渲染进程，其底层实现分别对应于 Node.js 和 Chromium。所以调试 Electron 应用的方式也需要区分不同进程。本文将汇总了几种常见的调试方式，使用者可以根据习惯自由选择。

1. 主进程调试

主进程调试可以使用 chrome的inspect模式 或者 VS CODE开发工具中的调试选项。

• 方法一：inspect工具

  • 开启命令行开关

  启动electron的时候需要带上inspect开关，并配置调试端口，有两个开关，分别是--inspect=[port]和--inspect-brk=[port]，区别在于后者会暂停在第一行js代码，如果不指定port，默认调试端口是5858

"start": "electron --inspect ."

• 设置chrome调试模式

  在浏览器输入：chrome://inspect/#devices，配置监听的端口，启动程序后，下方的Remote Target列表里就会出现我们要调试的electron程序。

image

点击下方的inpect进入调试界面，初次进入需要添加源码路径，如下图：

image

添加完成后，顶部有个确认操作，确认之后才是真正的添加成功。可调试的js文件都有绿色的小点进行标识，加入断点就可以正常调试。

• 方法二：vs code 调试主程序**

  使用vs code调试可以分为两种模式，一种是直接在vs中debug，另外一种方法是先使用命令行启动程序，而后在vs中通过attach方式连接程序进行调试。两种方式没有太大区别。

  • 第一步，在项目根目录下新建 .vscode/launch.json文件，并添加配置项。

  两种方式对应的配置项为：

{
    "version": "0.2.0",
    "configurations": [
      {
        //方式一
        "name": "Debug Main Process",
        "type": "node",
        "request": "launch",
        "cwd": "${workspaceFolder}",
        "timeout": 60000, //避免出现can not connect to the target错误
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
        "windows": {
          "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
        },
        "args" : ["."],
        "env": {
          "NODE_ENV": "development"
        },
      },
      {
        //方式二
        "name": "Attach",
        "type": "node",
        "request": "attach",
        "port": 5858,
        "sourceMaps": true,
        "address": "localhost",
        "timeout": 60000 //避免出现can not connect to the target错误
      }
    ]
}

• 在vs code的debug界面中可以看到两种debug方式。

image

需要注意的是，如果方式二中使用的是inspect-brk，开始调试后需要按F5开始代码跟踪。

更详细的VS CODE调试工具使用方式可以参照：https://code.visualstudio.com/docs/editor/debugging

2. 渲染进程调试

• 快捷键方式打开

  Electron 的渲染进程可以简单地理解为是 Chromium 的一个窗口,和其它前端程序一样，当聚焦到当前窗口后，可以使用Ctrl+Shift+I（macOS 下是 Cmd+Option+I）快捷键打开 devtools。

• 代码指定

  在某些特殊情况下快捷键的方式可能无法达到预期效果，比如窗口是隐藏的。这时可以使用 Electron 提供的 API 来打开 devtools：

    const mainWindow=new BrowserWindow()
    mainWindow.loadURL('www.jianshu.com')
    mainWindow.webContents.openDevTools()

该实现的效果是，在加载 HTML 文件之后即打开 devtools 。

• VS CODE调试

    {
        "name":"Renderer",
        "type":"chrome",
        "request":"attach",
        "port":9222," //可以在main.js中设置remote-debugging-port，更改默认端口
        webRoot":"${workspaceFolder}" // 需要指定静态资源对应目录
    }

3. 生产版本调试

待补充