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 프로그램 또는 크로미움 기반 브라우저를 디버그하듯이 Attach to Node.js/Chrome 설정을 사용한다.

호스트는 특별한 경우가 아니라면 당연히 로컬호스트를 사용한다.
포트에는 아까 npm 설정을 진행할 때 REMOTE_DEBUGGING_PORT 환경 변수에 지정한 포트를 입력한다.

Compound 설정 진행

여기까지만 해도 각각 단독으로 디버거를 실행하여 디버깅을 할 수 있으나, 당연히 디버그 할 때마다 두 번씩 디버그를 실행하는 것보다는 한 번에 실행하는 것이 낫다.3

일단 순서는 npm 'dev' -> Attach이지만, 목록은 항상 오름차순 정렬로 나타나는 것으로 보인다. 또한, 테스트 해보니 딱히 순서에 상관없이 잘 Attach 되는 것을 확인했으니 그냥 두 개 다 Compound 설정에 박아두고 저장하도록 하자.

디버그

이제 위에서 완성된 컴파운드 설정으로 디버그를 하면 정상적으로 메인/렌더러 프로세스 모두 디버깅이 시작되는 것을 확인할 수 있다.

  1. 어떤 기능을 구현하기 위해 검색할 때 웹팩보다 자료가 적은 편 ↩︎

  2. 만약 없다면 만들면 된다. ↩︎

  3. 심지어 디버그 재시작 시에도 하나씩 해 줘야 한다. 혹은 다른 키를 바인드하거나. ↩︎

댓글

댓글 쓰기

이 블로그의 인기 게시물

C# 남아도는 메모리에도 불구하고 OutOfMemoryException이 발생한다면?

이미지
  C# 코딩 중 평소 볼 수 없던 생소한 현상이 발생했습니다. 분명 메모리는 남아도는데(32기가바이트 중 26기가바이트 사용 가능) 프로그램이 돌다가 OutOfMemory 예외를 던지며 죽어버리는 현상이었죠. List 에 수많은 파싱된 데이터를 넣는 작업 중이었습니다.   그래서 메모리 프로파일러를 잘 관찰해보니 2GB의 메모리를 사용하면 무조건 뻗어버리는 현상을 발견했고, 왜 그럴까 생각해보다가 문득 예전 XP에서 4기가 메모리를 달아도 32비트 운영체제의 한계 아닌 한계로 3기가 조금 넘게밖에 인식을 못 했던 것이 생각났습니다. 생각은 자연스럽게 컴파일이 32비트로 됐구나! 쪽으로 넘어갔고 프로젝트 설정에 보니 빌드 항목에 해당되는 체크박스가 있더군요.   현재 메모리가 남아도는데도 OutOfMemory 예외가 뜬다면 100% 저게 체크된 상태일 겁니다. 그림과 같이 체크 해제 하신 후 실행하시면 특별한 경우가 아닌 이상 컴퓨터 메모리가 바닥날 때까지 저 예외를 볼 일 없게 될겁니다.
자세한 내용 보기

MySQL 데이터 타입과 Java 데이터 타입 비교/매칭

  안녕하세요? 혼살입니다. 블로그에 정말 오랜만에 글을 씁니다. 일하고 겜하고 일하고 겜하고 집에 박혀서 매일 똑같은 일상을 보내다 보니 블로그에 글을 오랫동안 안 쓰고 있었네요. 대부분 근황은 유튜브 동영상으로 대체하다 보니 더욱 더 그랬던 것 같습니다.   하지만 이번엔 영상보다 글로 남기는 게 더 유익할 것 같아 간만에 글을 쓰게 되었습니다. 바로 MySQL Data Types & Java Data Types 매칭! 현재 진행중인 외주 작업 중 SET 타입을 Java에선 어떻게 처리하나 찾아보다가 잘 정리된 블로그 글 을 발견해 나중에 손쉽게 찾기 위해 제 블로그에도 씁니다. 위 링크에 들어가시면 테이블로 잘 정리돼 있으니 한 번 들어가 보시는것도 괜찮겠네요. 왼쪽은 MySQL, 오른쪽은 Java의 데이터 타입입니다. BIT <-> Boolean TINYINT <-> Integer BOOL/BOOLEAN (TINYINT(1)) <-> Integer SMALLINT <-> Unsigned 상관없이 Integer MEDIUMINT <-> Integer, Unsinged라면 Long INT <-> Integer, Unsigned라면 Long BIGINT <-> Long, Unsigned라면 java.math.BigInteger FLOAT <-> Float DOUBLE <-> Double DECIMAL <-> java.math.BigDecimal DATE <-> java.sql.Date DATETIME <-> java.sql.Timestamp TIMESTAMP <-> java.sql.Timestamp TIME <-> java.sql.Timestamp YEAR <-> yearsIsDateType이 설정됐다면 java.sql.Date, 아니라면 Short CHA
자세한 내용 보기

테일즈위버 OST 전곡 모음

이미지
  블로그를 옮기면서 카드캡터 사쿠라 OST를 포함해 테일즈위버 OST 역시 까먹고 안 옮겼었네요. 소름... 블로그 조회수의 대부분을 차지하는 두 개를 안 옮겼었다니!   게임보다 OST들으러 들어간다는 테일즈 위버(Tales Weaver)의 모든 OST 모음집입니다. FLAC파일을 재생할 수 있는 플레이어가 필요합니다... 만 요새는 웬만해선 다 재생해주죠. 즐감하세요.
자세한 내용 보기