Electron 应用调试指南

Electron 是一个基于 Node.js 和 Chromium 的开源框架，用于构建桌面应用，开发者可使用 web 技术（HTML，JavaScript 和 CSS）完成整个应用的开发。许多知名桌面应用基于 Electron 实现，如 VSCode，Slack 和 GitHub Desktop 等。本文将介绍调试 Electron 应用的一些经常使用方法。

开发环境调试

Electron 应用进程分为主进程和渲染进程，其底层实现分别对应于 Node.js 和 Chromium。因此调试 Electron 应用的方式也基本等价于这二者的结合，目前社区提供的方案已经比较完善了。

调试主进程

Electron 主进程是一个 Node.js 进程。Node.js 在 8 以后引入了 --inspect 参数用于调试，一样也适用于 Electron 主进程：

./node_modules/.bin/electron . --inspect
复制代码

默认会监听 9229 端口，应用启动后，在 Chrome 浏览器（或其余基于 Chromium 开发的浏览器）中打开 chrome://inspect 便可看到对应的调试会话，点击会话连接便可打开 devtools 进行调试。

另外，能够在命令行参数中指定端口号，实现同时调试多个应用中的多个进程而不产生冲突：

./node_modules/.bin/electron . --inspect=1234
复制代码

调试渲染进程

仅从调试的角度来看，Electron 的渲染进程能够简单地理解为是 Chromium 的一个窗口。因此基本和 Chrome 浏览器中的调试网页方式是一致的，即 focus 到当前窗口后，使用 Ctrl+Shift+I（macOS 下是 Cmd+Option+I）快捷键便可打开 devtools。使用上也是一致的。

快捷键的方式在某些特殊状况下可能没法达到预期效果，好比窗口是隐藏的，没法 focus 到窗口。此时能够在代码中使用 Electron 提供的 JavaScript API 来打开 devtools：

const mainWindow = new BrowserWindow();

mainWindow.loadURL("file://path/of/index.html");
mainWindow.webContents.openDevTools();
复制代码

上述演示代码会在加载 HTML 文件以后执行打开 devtools 的操做。在实际使用中，将其放置到须要的位置便可。

在 VSCode 中调试

上述方法均会打开 devtools 界面，全部的调试操做均在 devtools 中进行。对于某些操做好比代码断点调试，能够进一步与编辑器或 IDE 相结合，提高开发体验。如下将简要介绍如何在 VSCode 进行调试。

以 Electron 官方的模板 electron-quick-start 为例，首先须要为 VSCode 安装一个扩展：Debugger for Chrome（用于调试渲染进程）。克隆代码仓库到本地并安装依赖：

git clone https://github.com/electron/electron-quick-start.git
cd electron-quick-start
npm install
复制代码

而后在仓库中添加文件 .vscode/launch.json，内容以下：

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Main",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": ["--remote-debugging-port=9222", "."],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      }
    },
    {
      "name": "Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9222,
      "webRoot": "${workspaceFolder}"
    }
  ],
  "compounds": [
    {
      "name": "All",
      "configurations": ["Main", "Renderer"]
    }
  ]
}
复制代码

而后在 VSCode 左侧选择 debug 面板，启动 All 这一项开始调试，此时就能够在 main.js 或 renderer.js 文件中添加断点了。

配置文件中的一些要点解释以下：

1. configurations 中的两项分别对应主进程和渲染进程。compounds 中指定了一个组合会话 All，选择 All 将会同时启动这两个会话。
2. Renderer 配置中的 webRoot 参数直接使用了 ${workspaceFolder}，是由于在这个工程中，HTML 引用的静态资源位于根目录下。实际使用的时候须要更新到对应的路径才会生效。
3. 实际开发中可能会有编译的流程，好比使用 TypeScript 配合打包工具 Webpack，最终生成的代码与源代码并不在一个路径下。这种状况下须要产出 source map 来创建映射关系。

生产环境调试

生产环境的状况比开发环境要复杂一些。通常来讲，咱们但愿有一个入口能够打开 devtools，以便在出现问题的时候可以方便调试；而另外一方面，这个入口与产品自己无关，咱们但愿它对用户隐藏。一个比较常见的方案是：指定一套私有的快捷键，监听对应事件并在回调中调用 JavaScript API 来打开 devtools，并将快捷键设置为复杂的组合，以下降用户误触的几率。

快捷键方案确实有必定可行性，不过并无从根本上解决这个问题。因此这里推荐使用 Debugtron 进行调试。Debugtron 是一个调试生产环境 Electron 应用的工具，无需在客户端集成任何代码。它自己也基于 Electron 构建，支持多个平台。

下载最新版本安装并打开 Debugtron 后，会检测并展现全部已安装的 Electron 应用：

点击图标后会进入调试环节。以 Electron Fiddle 为例，点击图标启动后，面板左侧会显示可调试的会话列表，包括主进程和渲染进程，能够根据标签来区分。右侧会显示主进程启动的日志：

在左侧的会话列表中选择一项，点击后会弹出对应的 devtools，能够在其中看到错误日志并定位问题，和开发环境彻底一致。同时也支持调试多个应用，启动多个应用后能够在 tab 区切换。

总结

Electron 的调试方案已经比较完善，在开发环节，主进程和渲染进程都可以很方便地打开 devtools 进行调试；并且这个工做流还能够深度集成到 VSCode 中，提高开发体验。

对于生产环境的状况，可使用 Debugtron 进行调试，无需在客户端集成额外的代码便可得到与开发环境基本一致的功能。

原文连接：github.com/pd4d10/blog…