Electronを起動する方法としてElectron Forgeを使えば、従来よりも簡単に構築できます。
ElectronサイトにはDocs、API中心で調べる時によく訪れ、Electron Forgeにはプロジェクト構成のためにアクセスします。
どちらのサイトもデバッグの設定方法を案内しています。VS Codeを使っているので、このエディタで実行しながらデバッグできる方法を探していました。
両方のサイトの例に従って設定し実行したところ、ブレークポイントが赤色ではなくグレーで表示され、ブレークポイントで止まりませんでした。 🥲
うまくいかなかったので、Vite環境を追加したことが原因ではないかと思い、Googleで「electron forge vite debug」というキーワードで検索し、解決策を見つけることができました。
参考になったのはVite template - code editor debugger can't hit breakpointsというGitHubイシューでした。
ここで案内された通りに設定すると以下のようになります。
vite.main.config.tsとlaunch.jsonにそれぞれ1行ずつ追加する必要があります。
// vite.main.config.ts
export default defineConfig((env) => {
// ...省略
const config: UserConfig = {
// ...省略
build: {
// ...省略
// この部分を追加してください！
sourcemap: forgeEnv.command == 'serve' ? true : false,
}
}
}sourcemapをlaunch.jsonにも追加すればOKです。
{
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Electron Main",
"runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.sh",
"windows": {
"runtimeExecutable": "${workspaceFolder}/node_modules/@electron-forge/cli/script/vscode.cmd"
},
// runtimeArgs will be passed directly to your Electron application
"runtimeArgs": [
"--sourcemap" // この部分を追加してください！
],
"cwd": "${workspaceFolder}",
"console": "integratedTerminal"
}
]
}この設定を行った後、デバッグモードで実行すればブレークポイントで止まるようになります！
これでElectron Forge + Vite + React環境でも快適にデバッグしながら開発ができます！
Success is not the key to happiness. Happiness is the key to success. If you love what you are doing, you will be successful.
— Albert Schweitzer
