在 VSCode 中除錯

本指南將說明如何為您自己的 Electron 專案以及原生 Electron 程式碼設定 VSCode 除錯。

除錯您的 Electron 應用程式

主進程

1. 在 VSCode 中開啟 Electron 專案。

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. 新增一個 .vscode/launch.json 檔案，並包含以下設定：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

3. 除錯

在 main.js 中設定一些斷點，並在除錯檢視中開始除錯。您應該能夠命中斷點。

這是一個預先設定的專案，您可以下載並直接在 VSCode 中除錯： https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

除錯 Electron 程式碼庫

如果您想從原始碼建置 Electron 並修改原生 Electron 程式碼庫，本節將幫助您測試您的修改。

對於那些不確定在哪裡取得此程式碼或如何建置它的人，Electron 的建置工具會自動化並解釋此過程的大部分內容。如果您希望手動設定環境，則可以改用這些建置說明。

Windows (C++)

1. 在 VSCode 中開啟 Electron 專案。

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. 新增一個 .vscode/launch.json 檔案，並包含以下設定：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(Windows) Launch",
      "type": "cppvsdbg",
      "request": "launch",
      "program": "${workspaceFolder}\\out\\your-executable-location\\electron.exe",
      "args": ["your-electron-project-path"],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [
          {"name": "ELECTRON_ENABLE_LOGGING", "value": "true"},
          {"name": "ELECTRON_ENABLE_STACK_DUMPING", "value": "true"},
          {"name": "ELECTRON_RUN_AS_NODE", "value": ""},
      ],
      "externalConsole": false,
      "sourceFileMap": {
          "o:\\": "${workspaceFolder}",
      },
    },
  ]
}

設定注意事項

• cppvsdbg 需要啟用內建的 C/C++ 擴充功能。
• ${workspaceFolder} 是 Chromium 的 src 目錄的完整路徑。
• your-executable-location 將取決於幾個項目，將會是以下其中之一
  • Testing：如果您使用的是 Electron 的建置工具的預設設定，或是從原始碼建置時的預設指示。
  • Release：如果您建置的是 Release 版本而不是 Testing 版本。
  • your-directory-name：如果您在建置過程中從預設值修改了此值，則這將是您指定的任何值。
• args 陣列字串 "your-electron-project-path" 應為您用於測試的 Electron 專案的目錄或 main.js 檔案的絕對路徑。在本範例中，它應為您 electron-quick-start 的路徑。

3. 除錯

在您選擇的原生 Electron C++ 程式碼的 .cc 檔案中設定一些斷點，並在除錯檢視中開始除錯。