일렉트론 로그 확인하기

 

일렉트론으로 만든 클라이언트를 디버깅할 때 console.log로 찍은 메시지가 클라이언트의 개발자 도구에서 항상 보이지는 않는다.

 

왜냐하면, 일렉트론에는 메인 프로세스와 렌더러 프로세스가 있고 console.log는 각 프로세스별로 실행되기 때문이다.

메인 프로세스는 애플리케이션의 생명 주기를 제어하고, 렌더러 프로세스는 웹 페이지를 렌더링한다.

따라서 콘솔을 어디서 찍었느냐에 따라 개발자 도구로 확인이 불가할 수 있다.

 

메인 프로세스에서 콘솔을 찍으면 (VSCode에서 실행한 경우) VSCode의 터미널에서 확인이 가능하고,

렌더러 프로세스에서 콘솔을 찍으면 실행된 애플리케이션의 개발자 도구에서 확인이 가능하다.

 

그럼 VSCode가 아니라 빌드한 애플리케이션을 따로 실행한 경우에는 메인 프로세스의 콘솔을 확인할 수 없게 된다.

 

이런 경우에는, electron-log 라는 모듈을 사용하면 해결된다!

https://www.npmjs.com/package/electron-log

electron-log

 

간편하게 npm 또는 yarn 등을 이용해서 프로젝트에 추가하여 바로 사용할 수 있다.

npm install electron-log

 

사용법도 간단하다. import한 뒤,

아래와 같이 log 내 info / error / warn / verbose / debug / silly 등으로 메시지를 출력할 수 있다.

import log from "electron-log";

app.whenReady().then(() => {
  log.info("App starting...");
});

 

위와 같이 찍은 로그는 별도의 파일로 저장되며, 경로는 아래와 같다.

 

windowsOS

%USERPROFILE%\AppData\Roaming\{app name}\logs\main.log

 

macOS

command+shift+. : 숨김파일보기

~/Library/Logs/{app name}/main.log