Intellij에서 electron 디버깅 설정
소개
이 기사는 Mac 환경의 Intellij에서 Electron을 디버깅하는 방법을 요약합니다.
Electron에는 Main과 Renderer의 두 가지 프로세스가 있지만 둘 다 디버깅 할 수 있습니다.
이번 설정을 한 환경은 다음과 같습니다.
이번에 사용한 소스 코드는 여기
TL;DR
Run/Debug configuration 에 설정을 작성하면 쉽게 디버깅할 수 있습니다.
샘플 코드 정보
이번에 사용한 샘플 코드는 create-react-app
에서 작성한 React 어플리케이션을 Electron에서 동작하도록 간단한 수정을 한 것입니다. 디버그 기동에 대해서 시험하는 것만이라면 일부러 create-react-app
를 사용할 필요도 없습니다만, 실제의 개발에서는 create-react-app
를 사용하는 것이 많기 때문에 가능한 한 환경을 맞추기 위해서 사용하고 있습니다.
설정 방법
실제로 설정 방법을 살펴 보겠습니다. Cmd + Shift + a에서 Find Actions 창을 표시하고 Edit configuration
를 선택합니다.
또는 화면 오른쪽 상단의 풀다운에서 선택합니다.
Main 프로세스
먼저 Main 프로세스에서 설정합니다. 창 왼쪽 상단의 + 마크를 클릭하고 목록에서 Node.js를 선택합니다.
후에는 설정을 기술하면 OK입니다. 패스는 자신의 환경에 맞추어 적절히 읽어 주세요.
Environment variables는 create-react-app
의 webpack dev server를 사용하기 위한 값입니다. 사용하지 않을 경우 설정하지 않아도 됩니다.
설정이 끝나면 오른쪽 하단의 OK 버튼을 눌러 설정을 저장합니다.
오른쪽 상단의 디버그 버튼을 누르면 시작할 수 있습니다. 마침내 Main 프로세스의 소스 코드에 중단 점을 설치하고 시작해 봅시다.
앱이 디버그 모드에서 시작되었습니다.
브레이크 포인트로 제대로 멈추고 있는 것을 알 수 있을까 생각합니다.
Renderer 프로세스
이어 Renderer 프로세스입니다. Renderer 프로세스의 디버깅에는 Chrome DevTools Protocol 되는 것을 사용합니다. 아무래도 들을 수 없는 것이 나옵니다만 기동시의 파라미터를 추가하는 것만으로 OK입니다. 편리하네요.
Main 프로세스와 마찬가지로 Run configuration을 열고 + 마크를 클릭하고 이번에는 Attach to Node.js/Chrome을 선택합니다.
이번에 사용한 샘플 코드는
create-react-app
에서 작성한 React 어플리케이션을 Electron에서 동작하도록 간단한 수정을 한 것입니다. 디버그 기동에 대해서 시험하는 것만이라면 일부러 create-react-app
를 사용할 필요도 없습니다만, 실제의 개발에서는 create-react-app
를 사용하는 것이 많기 때문에 가능한 한 환경을 맞추기 위해서 사용하고 있습니다.설정 방법
실제로 설정 방법을 살펴 보겠습니다. Cmd + Shift + a에서 Find Actions 창을 표시하고 Edit configuration
를 선택합니다.
또는 화면 오른쪽 상단의 풀다운에서 선택합니다.
Main 프로세스
먼저 Main 프로세스에서 설정합니다. 창 왼쪽 상단의 + 마크를 클릭하고 목록에서 Node.js를 선택합니다.
후에는 설정을 기술하면 OK입니다. 패스는 자신의 환경에 맞추어 적절히 읽어 주세요.
Environment variables는 create-react-app
의 webpack dev server를 사용하기 위한 값입니다. 사용하지 않을 경우 설정하지 않아도 됩니다.
설정이 끝나면 오른쪽 하단의 OK 버튼을 눌러 설정을 저장합니다.
오른쪽 상단의 디버그 버튼을 누르면 시작할 수 있습니다. 마침내 Main 프로세스의 소스 코드에 중단 점을 설치하고 시작해 봅시다.
앱이 디버그 모드에서 시작되었습니다.
브레이크 포인트로 제대로 멈추고 있는 것을 알 수 있을까 생각합니다.
Renderer 프로세스
이어 Renderer 프로세스입니다. Renderer 프로세스의 디버깅에는 Chrome DevTools Protocol 되는 것을 사용합니다. 아무래도 들을 수 없는 것이 나옵니다만 기동시의 파라미터를 추가하는 것만으로 OK입니다. 편리하네요.
Main 프로세스와 마찬가지로 Run configuration을 열고 + 마크를 클릭하고 이번에는 Attach to Node.js/Chrome을 선택합니다.
설정하고 저장합니다.
방금 설정한 Main 프로세스의 설정을 열고 Application parameters에
--remote-debugging-port=9229
를 설정합니다.이것으로 설정이 종료됩니다. 그리고는 Main 프로세스 때와 같이 디버그 기동을 실시합니다. 이때 Main 프로세스 ⇨ Renderer 프로세스의 순서로 시작합시다.
여기도 Renderer 프로세스에 설정한 중단점에서 멈추는 것을 알 수 있습니다.
요약
이제 Electron 애플리케이션 개발에서도 디버깅을 수행할 수 있습니다. 편리하네요.
참고
Reference
이 문제에 관하여(Intellij에서 electron 디버깅 설정), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/r-nouchi/items/0388a35f78762514aecf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)