2.5 基础调试方式：渲染进程 DevTools、主进程断点调试

在 Electron 开发中，调试是一个高频操作。无论你是刚入门还是已经写了几个月，总会遇到界面渲染不对、数据传递丢失、主进程崩溃等问题。好在 Electron 提供了两套顺手且强大的调试工具：渲染进程可以直接使用 Chrome DevTools，而主进程可以像普通 Node.js 程序一样用 VS Code 进行断点调试。这一节将带你掌握这两种调试方式，并给出真实可用的配置步骤。

2.5.1 渲染进程调试：打开 Chrome DevTools

因为每个 Electron 窗口都是一个 Chromium 内核的“小浏览器”，所以调试它的渲染进程就和调试普通网页一模一样。你可以在代码里手动打开 DevTools，也可以通过快捷键触发。

方法一：代码中开启

在创建窗口时，加一行调用即可：

const mainWindow = new BrowserWindow({
  width: 1024,
  height: 768,
  webPreferences: {
    preload: path.join(__dirname, 'preload.js'),
  },
});

mainWindow.loadFile('index.html');

// 开发环境下自动打开 DevTools
if (process.env.NODE_ENV === 'development') {
  mainWindow.webContents.openDevTools();
}

通常会将 openDevTools() 写在开发模式判断中，这样打包给用户时就不会弹出来了。

方法二：快捷键与菜单

Electron 默认注册了 Ctrl+Shift+I（Windows/Linux）或 Cmd+Option+I（macOS）来打开 DevTools，这和 Chrome 浏览器快捷键一致。你也可以在菜单里显式加上“开发者工具”菜单项：

const { Menu } = require('electron');
const template = [
  {
    label: 'View',
    submenu: [
      { role: 'toggleDevTools' },
    ],
  },
];
Menu.setApplicationMenu(Menu.buildFromTemplate(template));

设定后，应用菜单中就会出现“Toggle Developer Tools”选项，点击即可开启。

你能用 DevTools 做什么

元素审查：查看 HTML 结构、修改 CSS 样式，所见即所得。
控制台：打印 console.log、运行临时 JavaScript 脚本。
网络面板：监控发出的 HTTP 请求，检查 WebSocket 连接。
来源面板：断点调试前端代码，单步执行、查看变量。
性能面板：分析渲染帧率、内存占用、长任务。
应用面板：查看 Local Storage、Session Storage、IndexedDB。

因为渲染进程也加载了 Node.js 环境（取决于你的配置），你甚至可以在 DevTools 控制台直接使用 require 引入 Node 模块做临时代码测试，不过这建议只在开发阶段尝试，生产环境记得关闭 nodeIntegration。

2.5.2 主进程调试：使用 VS Code 断点

主进程运行在 Node.js 环境中，没有可视化的界面来打开 DevTools，但我们可以通过 VS Code 的调试功能挂接到主进程，实现断点、单步执行和变量查看。

步骤一：配置 VS Code 启动脚本

在项目根目录下创建 .vscode/launch.json，填入以下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Electron Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "runtimeArgs": [
        ".",
        "--remote-debugging-port=9222"
      ],
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "outputCapture": "std"
    }
  ]
}

关键点解释：

runtimeExecutable 指向本地的 Electron 可执行文件（通常是 node_modules/.bin/electron）。
runtimeArgs 中的 "." 代表当前目录，即 Electron 会寻找 main 字段指定的入口文件（package.json 中的 main）。
--remote-debugging-port=9222 可选，允许你用 Chrome 自带的 chrome://inspect 来调试主进程（另一种方式）。

步骤二：在主进程代码中打断点

打开你的 main.js，在想要暂停的地方点击行号左侧，出现红色圆点。例如在 createWindow 函数内设置断点：

function createWindow() {
  const mainWindow = new BrowserWindow({ ... });  // 在这里打断点
  mainWindow.loadFile('index.html');
}

步骤三：启动调试

按 F5 或在调试面板点击绿色启动按钮，Electron 应用就会启动，并在第一个断点处停住。此时你可以：

查看 mainWindow 对象的属性。
单步执行（F10）、跳入函数（F11）。
在“监视”面板添加表达式，如 process.platform。
使用 VS Code 的调试控制台执行临时代码。

其他主进程调试方法

使用 console.log 虽然原始但很直接。主进程的 console.log 输出会打印在启动 Electron 的终端里（如果从命令行启动）或者 VS Code 的调试控制台中。
使用 Electron 提供的 --inspect 参数，然后打开 Chrome 浏览器的 chrome://inspect 页面，可以看到 Remote Target 列表中出现了你的 Electron 主进程，点击“inspect”就能像调试 Node.js 一样调试它。这种方式需要先终止当前 VS Code 调试，并在独立终端用 electron --inspect=5858 . 启动，然后在 Chrome 里操作。

2.5.3 同时调试主进程和渲染进程

实际开发中经常需要串联调试：比如渲染进程发了一条 IPC 消息给主进程，主进程处理后返回结果。可以用 VS Code 的复合配置同时启动主进程调试，并正常在窗口中打开 DevTools 调试渲染进程。

在 launch.json 中增加一个复合启动配置：

{
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Debug Electron Main Process"]
    }
  ]
}

但 Electron 应用只有一个主进程，渲染进程是由主进程创建的，所以你只需要启动主进程调试，然后在渲染进程窗口用快捷键打开 DevTools 即可。主进程断点会在 VS Code 里暂停，渲染进程断点会在 DevTools 里暂停，两者互不干扰。

2.5.4 调试技巧与常见问题

热重载与调试：如果你使用了 electron-reload 或 electron-reloader 进行热重载，注意断点可能会在重载时丢失。建议固定需要在稳定状态调试的逻辑时关闭热重载。
无头调试：可以在主进程启动参数中加入 --headless 让其不显示窗口，只测试主进程逻辑（适用于自动化脚本）。
远程调试：启动 Electron 时加上 --remote-debugging-port=9222，然后在同一局域网的另一台机器的 Chrome 访问 http://<IP>:9222 即可调试渲染进程。这对于调试在树莓派等设备上的 Electron 应用很有用。
性能分析：主进程可以使用 Node.js 的内置 profiler（--inspect 结合 Chrome DevTools 的 CPU 分析器），渲染进程则直接在 DevTools 的 Performance 面板录制。

调试是保证应用质量的重要环节。掌握这两种调试方式，你将有能力快速定位绝大多数问题，从而把更多时间花在业务功能的实现上。下一章我们将开始构建第一个完整的 Electron 应用，把前面所学的基础知识串联起来。