Electron을 구동하는 방법에서 Electron Forge를 사용해서 기존보다 쉽게 만들 수 있어요.
Electron 사이트에는 Docs, API 위주로 찾아볼 때 많이 들어가고 Electron Forge에는 프로젝트 구성을 하기 위해 들어가요.
두 사이트 모두 디버깅을 위한 설정을 어떻게 하는지 알려주고 있어요. 저는 VS Code를 사용하고 있어서 이 프로그램에서 실행시키면서 디버깅을 할 수 있는 방법을 찾고 있었어요.
두 사이트에 나온 예제 중 두개 다 하라는대로 하고 실행시켰을 때 브레이크포인트가 빨갛게 나오지 않고 회색깔로 나오면서 브레이크포인트에 잡히지 않았어요. 🥲
잘되지 않아서 Vite 환경을 추가했기 때문에 안되는 것 같아서 구글에 electron forge vite debug 라는 키워드로 검색했고 이를 통해 답을 찾을 수 있었어요.
제가 찾은 링크에서 유용했던 건 Vite template - code editor debugger can't hit breakpoints 라는 깃허브 이슈였어요.
여기서 알려준대로 설정하면 다음과 같아요.
vite.main.config.ts와 launch.json에서 각각 한줄씩 추가해야 해요.
// vite.main.config.ts
export default defineConfig((env) => {
// ...생략
const config: UserConfig = {
// ...생략
build: {
// ...생략
// 이 부분을 추가해주세요!
sourcemap: forgeEnv.command == 'serve' ? true : false,
}
}
}sourcemap을 launch.json에도 추가하면 돼요.
{
"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
