electron-viteで作成したプロジェクトのRendererプロセスをVSCode上でデバッグする方法

electron-vite の Scaffolding で作成したプロジェクトの Renderer プロセスを VSCode 上でデバッグする方法についてまとめました。下記のバージョンで確認した内容になります。

• electron 23.1.0
• electron-vite 1.0.19

VSCode のデバッグ構成（launch.json）

まず VSCode のデバッグ構成を以下のように変更します。

.vscode/launch.json

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceRoot}",
      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite",
      "windows": {
        "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron-vite.cmd"
      },
      "runtimeArgs": ["--sourcemap"]
    },
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223,
      "restart": true
    }
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": ["Electron: Main", "Electron: Renderer"]
    }
  ]
}

Electron 公式のクイックスタートに沿ってプロジェクトを構築した場合に作成するものと内容はほとんど同じですが違いが２つあります。

１つ目は runtimeExecutable で起動するスクリプトが electron-vite になる点。２つ目は runtimeArgs では electron.exe の起動パラメータを指定しない（できない）点です。

runtimeExecutable が electron の場合は runtimeArgs で electron.exe の起動パラメータ（コマンドラインスイッチ）を渡せるため、ここに--remote-debugging-port=9223を指定するだけで Renderer プロセスをデバッグできるようになります。

electron-vite でもスクリプト内で electron.exe を起動していますが、現在のバージョンでは runtimeArgs で指定したパラメータは electron-vite の起動パラメータとして解釈されるため electron.exe の起動パラメータを runtimeArgs 経由で渡すことができません。

メインプロセスのエントリポイントで electron のコマンドラインスイッチを設定する

app の ready イベントが発生する前であれば、メインプロセス内のスクリプトで electron の起動パラメータを指定できるようなので、この方法で本来デバッグ構成で渡したかった起動パラメータを設定してやります。

src/main/index.ts

import { app, BrowserWindow } from 'electron';
import { electronApp, is, devTools, platform } from '@electron-toolkit/utils';

if (is.dev) {
  app.commandLine.appendSwitch('remote-debugging-port', '9223');
}

app.whenReady().then(async () => {
  // 略
});

https://www.electronjs.org/ja/docs/latest/api/command-line-switches

本記事の内容は以上となります。