偵錯

在 Electron 應用程式中，主進程和渲染器進程有不同的偵錯機制

• 渲染器進程可以使用 Chromium 開發人員工具進行偵錯。

• 主進程可以透過 --inspect 和 --inspect-brk 命令列旗標進行偵錯。

本指南將介紹使用 Forge 特有的方式，透過命令列或程式碼編輯器對主進程進行偵錯。

本指南的每個章節都假設您的 package.json 具有 "start": "electron-forge start" 指令碼。

如需有關偵錯 Electron 應用程式的更多一般資訊，請參閱 有關應用程式偵錯的 Electron 主要文件。

在命令列上偵錯

執行 electron-forge start 時，您可以指定 --inspect-electron 旗標。在內部，這會啟用 Electron --inspect 旗標，且主進程將在 5858 連接埠上監聽偵錯用戶端。

npm run start -- --inspect-electron

一旦您的應用程式啟用，請在任何基於 Chromium 的瀏覽器中開啟 chrome://inspect，以將偵錯工具附加到您應用程式的主進程。

若要在偵錯時在第一行執行處新增中斷點，您可以使用 Forge 的 --inspect-brk-electron 旗標來代替。

使用 VS Code 偵錯

若要透過 VS Code 偵錯主進程，請新增以下 Node.js 啟動設定

.vscode/launch.json

{
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Electron Main",
      "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
      },
      // runtimeArgs will be passed directly to your Electron application
      "runtimeArgs": [
        "foo",
        "bar"
      ],
      "cwd": "${workspaceFolder}",
      "console": "integratedTerminal"
    }
  ]
}

新增此設定後，透過 VS Code 的「執行和偵錯」視圖啟動應用程式，即可開始偵錯。

使用 WebStorm 或其他 Jetbrains IDE 偵錯

1. 存取 Run > Debug... 功能表，並選取 Edit Configurations... 選項以開啟 Run/Debug Configurations 視窗。

2. 按一下左上角的 Add new configuration 按鈕 ( + 圖示)，並選取 npm 範本。

3. 在 Scripts 下拉式功能表中，選取 start。

4. 按一下 Debug 以開始偵錯您的應用程式。