electron 打开调试_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 文件中添加断点了：
配置文件中的一些要点解释如下：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 进行调试，无需在客户端集成额外的代码即可获得与开发环境基本一致的功能。