😎

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

2023/02/22に公開

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

1つ目は runtimeExecutable で起動するスクリプトが electron-vite になる点。2つ目は 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

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

Discussion