VS Code デバッグ¶

このリポジトリには .vscode/launch.json を用意しています。

構成一覧¶

Compound（まとめて起動）¶

個別構成¶

使い方¶

前提¶

example 側の vite.config.ts で debug オプションを有効にしておく必要があります。

electron({
  main: { entry: 'electron/main.ts' },
  preload: { entry: 'electron/preload.ts' },
  debug: {
    enabled: true,
    port: 9229,
    rendererPort: 9222,
  },
})

Compound 構成での起動¶

1. VS Code の「実行とデバッグ」パネルを開く
2. ドロップダウンから Compound 構成を選択
3. ▶ で起動

Compound 構成は以下を順に実行します:

1. pnpm dev で Vite dev server + Electron を起動
2. Electron main process に Node inspector で attach
3. Electron renderer に Chrome DevTools で attach

個別に attach¶

dev server を別途起動済みの場合、Attach 構成だけを選んで attach できます。

ポートの対応¶

これらのポートは debug.port と debug.rendererPort で変更できます。launch.json 側のポートも合わせて変更してください。

トラブルシューティング¶

初回 attach がタイムアウトする¶

Compound 構成では、Vite dev server の起動と attach が同時に開始されます。main / preload のビルドが完了して Electron が起動するまで、デバッグポートは開きません。

ビルド時間が長い場合（依存が多い、マシンスペックが低い等）、既定の timeout: 60000（60 秒）では不足することがあります。launch.json の各 Attach 構成で timeout を増やしてください。

// 例: 120 秒に変更
"timeout": 120000

ファイル変更後にデバッガが切断される¶

このプラグインでは、main と preload どちらのファイルを変更しても Electron プロセス全体が再起動されます（preload 変更時も renderer reload ではなく full restart）。再起動すると Node inspector port (9229) と Chrome DevTools port (9222) の両方が一度切断されます。

各 Attach 構成に "restart": true を設定しておくと、切断後に自動で再アタッチを試みます。

// Main attach
{
  "type": "node",
  "request": "attach",
  "restart": true,  // Electron 再起動時に自動で再アタッチ
  // ...
}

// Renderer attach
{
  "type": "chrome",
  "request": "attach",
  "restart": true,  // Electron 再起動時に自動で再アタッチ
  // ...
}