— 다시 빌드하기 싫을 때 꼭 필요한 꿀팁입니다

Electron 개발을 하다 보면, 이런 순간이 꼭 찾아옵니다.

개발 모드에서는 정말 말 잘 듣던 앱이

배포 모드(Prod)만 올라가면 갑자기 태도가 달라지는 순간이요.

• 무한 로딩만 뱅글뱅글 돈다든지
• 특정 페이지에서 멈춘다든지
• 엔진 IPC만 Prod에서 실패한다든지
• 심지어 콘솔도 안 찍혀서 뭐가 문제인지 감도 안 잡히는…

게다가 더 난감한 건,

“아… 제가 DevTools를 막아놨죠…”

이겁니다.

보안을 위해 devTools: false 넣어놨거나

빌드할 때 콘솔 제거 플러그인까지 적용해놓아서

배포된 exe에서는 DevTools를 열 수 없는 상황이 됩니다.

이때, 보통 떠올리는 해결책은 두 가지입니다.

1. DevTools 다시 열리게 코드 고치고 →
2. 빌드 → 패키징 → 설치 → 다시 테스트

하지만…

솔직히 이 과정, 한 번 하면 괜찮은데

버그가 계속 바뀌기라도 하면 정말 피곤해집니다.

그래서 저는 결국 방법을 찾아냈습니다.

---

✨ 결론부터 말하자면,

배포된 exe 그대로 DevTools를 열 수 있습니다.

다시 빌드하지 않아도 됩니다.

코드를 한 줄도 고칠 필요 없습니다.

심지어 devTools를 false로 막아놔도 가능합니다.

Electron의 정체는 결국 Chromium 기반 브라우저입니다.

그리고 Chrome에는 공식적으로 “원격 디버깅 포트(Remote Debugging Port)”라는 기능이 있습니다.

이걸 Electron에서도 그대로 활용할 수 있습니다.

즉, 앱을 실행할 때 아래 옵션 한 줄만 붙이면 됩니다.

--remote-debugging-port=9222

이게 끝입니다.

---

🔧 방법: 배포된 exe에서 DevTools 강제로 열기

1. CMD(명령 프롬프트)를 실행합니다.

윈도우키 → cmd → 엔터

2. 배포된 exe가 있는 폴더로 이동합니다.

예를 들어 앱이 여기 설치돼 있다고 가정하면:

C:\Users\사용자명\AppData\Local\Programs\YourApp

명령어는:

cd "C:\Users\사용자명\AppData\Local\Programs\YourApp"

3. 앱을 디버깅 포트와 함께 실행합니다.

YourApp.exe --remote-debugging-port=9222

이렇게 실행한 순간부터 Electron 내부의 Chromium은

디버깅용 포트(9222)를 열어놓게 됩니다.

앱은 그대로 정상 실행됩니다.

코드도 건드린 적 없습니다.

하지만 Chromium은 “디버깅 연결 준비 완료” 상태가 됩니다.

4. Chrome 브라우저에서 DevTools로 접속합니다.

Chrome 주소창에 입력합니다:

chrome://inspect

→ “Discover network targets” 클릭

→ localhost:9222 추가

→ 아래쪽 “Remote Target”에 Electron 프로세스가 뜹니다.

→ Inspect 버튼을 클릭합니다.

그러면 바로 DevTools가 열립니다.

Elements, Console, Network, Sources, Performance, Application…

배포 모드에서만 보이는 그 문제들을

그 자리에서 그대로 확인할 수 있습니다.

---

🎁 이 방법의 장점

✔ devTools: false여도 무조건 열립니다

Electron 옵션으로 막혀 있어도 상관없습니다.

✔ 콘솔 제거 플러그인 적용돼 있어도 Network/Elements는 완전히 보입니다

remove-console 같은 플러그인 적용돼도 콘솔만 사라질 뿐,

디버깅 포트 연결은 그대로 가능합니다.

✔ asar로 압축된 배포 버전에서도 당연히 가능합니다

app.asar이든 unpacked든 관계 없습니다.

✔ 다시 빌드할 필요가 없습니다

코드 수정 → 빌드 → 패키징 → 설치…

이 반복 루프를 피할 수 있습니다.

✔ 생산성 급상승

Prod 환경에서만 터지는 버그를 바로 캐치할 수 있습니다.

---

💬 마무리

Electron을 쓰다 보면 “개발 모드에서는 안 나는 버그가 왜 배포 모드에서만…” 이런 상황이 흔합니다.

그럴 때 DevTools까지 막혀 있다면 디버깅 자체가 막히기 쉽죠.

하지만 Electron은 브라우저 기반이기 때문에

이렇게 디버깅 포트만 열어주면 언제든 다시 DevTools를 연결할 수 있습니다.

저는 이 기능을 알고 난 후로

배포 빌드 다시 만드는 일이 절반으로 줄었습니다.

똑같은 문제를 겪고 있는 분들께 꼭 도움이 되었으면 합니다.