Skip to main content

윈도우에서 디버깅하기

여러분의 JavaScript 애플리케이션이 아닌 Electron 자체에서 발생한 것으로 보이는 충돌이나 문제를 겪고 있다면, 디버깅이 다소 까다로울 수 있다. 특히 네이티브/C++ 디버깅에 익숙하지 않은 개발자에게는 더욱 그렇다. 하지만 Visual Studio, Electron의 호스팅 심볼 서버, 그리고 Electron 소스 코드를 활용하면 Electron 소스 코드 내부에 중단점을 설정해 단계별 디버깅을 수행할 수 있다.

추가 참고 자료: 크로미엄 개발자 사이트에는 크로미엄 디버깅에 관한 풍부한 정보가 있으며, 이 중 상당 부분이 Electron에도 적용된다. 윈도우에서 크로미엄 디버깅하기를 참고하라.

요구사항​

  • Electron 디버그 빌드: 가장 쉬운 방법은 일반적으로 Windows 빌드 가이드에 나열된 도구와 필수 조건을 사용해 직접 빌드하는 것이다. 다운로드한 Electron에 직접 디버거를 연결할 수 있지만, 이 경우 최적화가 많이 되어 있어 디버깅이 상당히 어려워진다. 디버거가 모든 변수의 내용을 표시하지 못할 수 있으며, 인라이닝, 꼬리 호출 등 컴파일러 최적화로 인해 실행 경로가 이상하게 보일 수 있다.

  • Visual Studio with C++ Tools: 무료 커뮤니티 버전인 Visual Studio 2013과 Visual Studio 2015 모두 사용 가능하다. 설치 후 Visual Studio가 Electron의 심볼 서버를 사용하도록 설정한다. 이렇게 하면 Visual Studio가 Electron 내부에서 일어나는 일을 더 잘 이해할 수 있게 되어, 변수를 사람이 읽기 쉬운 형식으로 표시하는 데 도움이 된다.

  • ProcMon: 무료 SysInternals 도구인 ProcMon을 사용하면 프로세스의 매개변수, 파일 핸들, 레지스트리 작업 등을 검사할 수 있다.

Electron에 연결하고 디버깅하기​

디버깅 세션을 시작하려면 PowerShell 또는 CMD를 열고 디버그 빌드된 Electron을 실행한다. 이때 애플리케이션을 열기 위한 인자로 사용할 경로를 함께 전달한다.

$ ./out/Testing/electron.exe ~/my-electron-app/

브레이크포인트 설정하기​

먼저 Visual Studio를 실행한다. Electron은 Visual Studio로 빌드되지 않았기 때문에 프로젝트 파일이 포함되어 있지 않다. 하지만 소스 코드 파일을 "파일로 열기" 옵션을 통해 개별적으로 열 수 있다. 이렇게 하면 Visual Studio가 해당 파일들을 단독으로 열어준다.

브레이크포인트를 설정할 수 있다. Visual Studio는 소스 코드가 연결된 프로세스에서 실행 중인 코드와 일치하는지 자동으로 파악하고, 그에 따라 브레이크포인트에서 실행을 중단한다.

관련 코드 파일은 ./shell/ 디렉토리에서 찾을 수 있다.

디버거 연결​

Visual Studio 디버거를 로컬 또는 원격 컴퓨터에서 실행 중인 프로세스에 연결할 수 있다. 프로세스가 실행 중일 때, 디버그(Debug) / 프로세스에 연결(Attach to Process)을 클릭하거나 (CTRL+ALT+P 단축키를 눌러) "프로세스에 연결" 대화 상자를 열 수 있다. 이 기능을 사용하면 로컬 또는 원격 컴퓨터에서 실행 중인 애플리케이션을 디버깅하거나, 여러 프로세스를 동시에 디버깅할 수 있다.

Electron이 다른 사용자 계정으로 실행 중인 경우, 모든 사용자의 프로세스 표시(Show processes from all users) 체크박스를 선택해야 한다. 애플리케이션이 열어 놓은 BrowserWindows의 수에 따라 여러 프로세스가 표시될 수 있다. 일반적으로 하나의 윈도우를 가진 애플리케이션은 Visual Studio에서 두 개의 Electron.exe 항목을 보여준다. 하나는 메인 프로세스이고, 다른 하나는 렌더러 프로세스다. 리스트에서는 이름만 제공되기 때문에, 현재로서는 어떤 프로세스가 어떤 역할을 하는지 정확히 구분할 수 있는 신뢰할 만한 방법이 없다.

어떤 프로세스에 연결해야 할까?​

메인 프로세스 내에서 실행되는 코드(즉, 메인 자바스크립트 파일에 있거나 최종적으로 메인 파일에 의해 실행되는 코드)는 메인 프로세스에서 실행된다. 반면 다른 코드는 각각의 렌더러 프로세스 내에서 실행된다.

디버깅할 때 여러 프로그램에 동시에 연결할 수 있지만, 디버거에서는 한 번에 하나의 프로그램만 활성화된다. Debug Location 툴바나 Processes 윈도우에서 활성 프로그램을 설정할 수 있다.

ProcMon을 사용해 프로세스 관찰하기​

Visual Studio는 특정 코드 경로를 검사하는 데 뛰어나지만, ProcMon의 강점은 애플리케이션이 운영체제와 상호작용하는 모든 활동을 관찰할 수 있다는 점이다. ProcMon은 파일, 레지스트리, 네트워크, 프로세스, 프로파일링 등 프로세스의 세부 정보를 포착한다. 모든 이벤트를 기록하려고 시도하기 때문에 정보가 너무 많아 압도적일 수 있지만, 애플리케이션이 운영체제에 어떤 작업을 어떻게 수행하는지 이해하려는 경우 매우 유용한 도구가 될 수 있다.

ProcMon의 기본 및 고급 디버깅 기능을 소개하는 이 비디오 튜토리얼을 참고하면 도움이 될 것이다.

WinDbg 사용하기​

WinDbg를 사용하면 Renderer 프로세스의 크래시나 문제를 디버깅할 수 있다.

WinDbg로 프로세스에 디버거를 연결하려면 다음 단계를 따른다:

  1. Electron에 --renderer-startup-dialog 커맨드라인 플래그를 추가한다.
  2. 디버깅하려는 앱을 실행한다.
  3. "Renderer starting with pid: 1234"와 같은 pid가 포함된 다이얼로그 박스가 나타난다.
  4. WinDbg를 실행하고 애플리케이션 메뉴에서 "File > Attach to process"를 선택한다.
  5. 3단계에서 확인한 pid를 입력한다.
  6. 디버거가 일시 정지 상태가 되고, 앱에 텍스트를 입력할 수 있는 커맨드라인이 나타난다.
  7. 위의 커맨드라인에 "g"를 입력하여 디버깅 대상을 시작한다.
  8. 엔터 키를 눌러 프로그램을 계속 실행한다.
  9. 다이얼로그 박스로 돌아가 "ok"를 누른다.