JetBrains WebStorm에서 electron-vite 디버그하기 (렌더러 메인 모두)
JetBrains WebStorm에서 electron-vite 디버그하기 (렌더러 메인 모두) electron-vite electron-vite 는 Electron 을 ViteJS 위에서 돌리기 위한 프리셋을 제공해주는 도구이다. vite Vite는 Webpack 에 비해 어마무시할 정도로 빠른 퍼포먼스를 자랑하기 때문에 내가 최근 들어 애용하기 시작했는데 아무래도 웹팩에 비해 후발 주자라서 갖는 단점 1 이 있긴 하지만, 그것을 압도하는 빠른 성능 때문에 안 쓸래야 안 쓸 수가 없게 되었다. electron 일렉트론은 웹앱을 데스크탑 응용 프로그램으로 제작하는 용도로 쓰인다. 다시 말해, 웹 사이트를 구축하듯이 디자인 및 프로그래밍을 하되 OS에서 제공하는 API들 역시 이용할 수 있게 해준다는 의미로 받아들이면 얼추 맞다. JetBrains WebStorm에서 electron-vite 디버그 그렇다면 electron-vite 디버그는 어떻게 해야 할까? 결론부터 말하자면 그냥 electron을 디버그하는 것과 크게 다르지 않다. npm dev 수정 일단 npm run dev 를 실행하는 기본 구성 파일을 수정한다. 2 Arguments 에 --sourcemap 을 추가해주고 Environment 에 REMOTE_DEBUGGING_PORT={디버그 포트} 를 추가한다. 난 공식 사이트 를 따라 9222 로 지정하였다. 위 프로젝트 설정은 해당 Run/Debug 설정으로 Run/Debug할 때 소스맵을 제공하면서 디버그 포트를 적용시켜 후술할 Attach 기능이 작동할 수 있도록 한다. Attach to Node.js/Chrome 설정 생성 이제 디버그 포트가 열린 채로 켜진 일렉트론 렌더러를 디버그하기 위해 렌더러 프로세스에 부착할 디버거 설정을 진행할 차례이다. Electron은 크로미움 기반 브라우저 위에서 돌아가기 때문에, CEF 프로그램 또는 크로미움 기반 브라우...