メインコンテンツへ飛ぶ

VS Code でデバッグする

このガイドでは、自作の Electron プロジェクトとネイティブの Electron コードベース両方の VSCode デバッグを設定する方法について説明します。

Electron アプリをデバッグする

メインプロセス

1. VS Code で Electron プロジェクトを開く

$ git clone [email protected]: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. VS Code で Electron プロジェクトを開く

$ git clone [email protected]: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: Testing ビルドではなく Release ビルドで構築した場合。
    • your-directory-name: ビルド処理中にこれをデフォルトから変更した場合は、指定したものがそのまま適用されます。
  • args 配列文字列内の "your-electron-project-path" は、テストに用する Electron プロジェクトのディレクトリまたは main.js ファイルへの絶対パスでなければなりません。 このサンプルでは、 electron-quick-start へのパスである必要があります。

3. デバッグする

ネイティブの Electron C++ コード内の任意の .cc ファイルにブレークポイントを設定し、デバッグビュー でデバッグを開始しましょう。