Electron - 调试

Electron - 调试你的应用程序

Electron 应用程序至少包含两种类型的进程：主进程和一个或多个渲染进程。它们的调试技术略有不同。

调试渲染进程

渲染进程本质上是在 Electron BrowserWindow 中运行的网页。因此，你可以使用熟悉的 Chrome DevTools 来调试它们的 JavaScript、检查 DOM、分析网络请求等。

要为一个特定的 BrowserWindow 打开 DevTools：

通过编程方式：在主进程中调用 win.webContents.openDevTools()（其中 win 是你的 BrowserWindow 实例）。
手动：当窗口获得焦点时，按下 Ctrl+Shift+I（在 Windows/Linux 上）或 Cmd+Option+I（在 macOS 上）。F12 键也可能有效。

DevTools 打开后，它将附加到该渲染进程。你可以使用“Sources”标签页设置断点，使用“Console”查看日志和执行命令等。有关使用 Chrome DevTools 的更多信息，请参阅官方 Chrome DevTools 文档。

当 DevTools 打开时，你的应用程序窗口通常会分屏显示 DevTools 面板，或者 DevTools 可能会在单独的窗口中打开，具体取决于其设置。

调试主进程

主进程运行 Node.js，并且默认没有附加 DevTools 的可见窗口。要调试主进程，你需要使用 Node.js 调试器。

使用 Chrome DevTools 调试主进程

你可以使用命令行开关指示 Electron 在特定端口监听调试器：

--inspect=[port]：启用 inspector 代理并在指定端口（默认为 9229）上监听。脚本将立即开始执行。
--inspect-brk=[port]：类似于 --inspect，但执行将在代码的第一行暂停，允许你在任何代码运行之前设置断点。

示例：要启动你的应用，使其在端口 9229 上监听调试器并在启动时暂停：

$ electron --inspect-brk=9229 .

然后，打开 Google Chrome 并导航到 chrome://inspect。点击“Discover network targets”旁边的“Configure…”，确保 localhost:<port>（例如，localhost:9229）已列出。你的 Electron 应用程序应该会显示为一个远程目标。点击你的应用程序目标下方的“inspect”即可为主进程打开一个专用的 DevTools 窗口。

使用 Visual Studio Code (VS Code)

VS Code 对调试 Node.js 应用程序（包括 Electron 的主进程）提供了出色的内置支持。你需要在项目的 .vscode 目录中配置一个 launch.json 文件。

创建或打开 .vscode/launch.json 文件并添加如下配置：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "pwa-node", // Or "node"
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      // On Windows, use this path for runtimeExecutable if installed locally:
      // "runtimeExecutable": "${workspaceFolder}/node_modules/.bin\\electron.cmd",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}\\node_modules\\.bin\\electron.cmd"
      },
      // Pass the main script (e.g., main.js or your project root) as an argument
      // If your package.json's "main" field points to your entry script,
      // you can often use "." to tell Electron to load the current directory.
      "args": ["."],
      // Alternatively, if your main script is always main.js:
      // "program": "${workspaceFolder}/main.js",
      "outputCapture": "std"
    }
  ]
}

关于此配置的说明：

type：pwa-node 是现代的调试器类型，node 也可以工作。
runtimeExecutable：指向项目中 node_modules 内的 Electron 可执行文件。如果 Electron 是全局安装的（尽管推荐局部安装），请调整此路径。
args：["."] 告诉 Electron 在当前工作目录（cwd）中启动应用，遵循 package.json 中的 main 字段。如果你的入口脚本名称不同且未在 package.json 中指定，你可以使用 "program": "${workspaceFolder}/your-main-script.js" 代替 args。
outputCapture：在 VS Code 的调试控制台中显示主进程的 console.log 输出。

设置好 launch.json 后，转到 VS Code 中的“运行和调试”视图（通常是带有 bug 图标的播放按钮），从下拉菜单中选择“调试主进程”，然后点击绿色的播放按钮或按下 F5。你现在可以在你的 main.js 文件（或其他主进程脚本）中设置断点，单步执行代码，检查变量，并使用调试控制台。

当使用 VS Code 在 main.js 中命中一个断点时，编辑器会高亮该行，你将在调试面板中看到调用堆栈、变量和监视表达式，这提供了一个强大的环境来识别和解决主进程逻辑中的问题。