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: テストビルドではなくリリースビルドをビルドした場合。
  • your-directory-name: ビルドプロセス中にデフォルトから変更した場合、これは指定した内容になります。
• args配列文字列"your-electron-project-path"は、テストに使用しているElectronプロジェクトのディレクトリまたはmain.jsファイルへの絶対パスである必要があります。この例では、electron-quick-startへのパスである必要があります。

3. デバッグ

ネイティブElectron C++コードで選択した.ccファイルにブレークポイントを設定し、デバッグビューでデバッグを開始します。