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 文件中添加断点了。

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

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

生产环境调试

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

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

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

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

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

总结

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

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

原文链接：https://github.com/pd4d10/blog/issues/2