VSCodeでElectronアプリのlaunch.jsonを設定する方法

2024-03-16 01:34 VSCode Electron launch.json

  1. VSCodeを開き、エディタのサイドバーでデバッグアイコンをクリックします（デバッグツールバーからでもアクセスできます）。

  2. デバッグビューが表示されたら、右上の歯車アイコン（「構成の追加または編集」）をクリックします。

  3. デバッグの構成を選択する画面で、"Node.js"を選択します。

  4. すると、.vscodeディレクトリにlaunch.jsonファイルが作成されます。

  5. launch.jsonファイルを開き、"configurations"配列内に以下の設定を追加します:

{
  "type": "node",
  "request": "launch",
  "name": "Electron: Main",
  "protocol": "inspector",
  "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
  "windows": {
    "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
  },
  "args": ["."],
  "cwd": "${workspaceFolder}"
}

上記の設定では、Electronアプリのメインプロセスをデバッグします。

  1. 設定を保存し、VSCodeのデバッグビューに戻ります。

  2. デバッグの構成ドロップダウンメニューから、"Electron: Main"を選択します。

  3. デバッグセッションを開始するために、「再生」ボタン（緑色の三角形）をクリックします。

これで、VSCodeでElectronアプリのデバッグが開始されます。デバッグセッション中にブレークポイントを設定したり、ステップ実行したりすることができます。

以上が、VSCodeでElectronアプリのlaunch.jsonを設定する方法の概要です。これにより、簡単かつ効果的にElectronアプリのデバッグが可能となります。