개발자 도구 확장 기능

어플리케이션의 디버깅을 쉽게 하기 위해 Electron은 기본적으로 Chrome DevTools Extension을 지원합니다.

개발자 도구 확장 기능은 간단하게 사용할 확장 기능 플러그인의 소스 코드를 다운로드한 후 BrowserWindow.addDevToolsExtension API를 통해 어플리케이션 내에 로드할 수 있습니다. 한가지 주의할 점은 확장 기능 사용시 창이 생성될 때 마다 일일이 해당 API를 호출할 필요는 없습니다.

주의: 현재 React DevTools은 작동하지 않습니다. https://github.com/atom/electron/issues/915 이슈를 참고하세요!

다음 예제는 React DevTools Extension을 사용합니다.

먼저 소스코드를 다운로드 받습니다:

$ cd /some-directory
$ git clone --recursive https://github.com/facebook/react-devtools.git

react-devtools/shells/chrome/Readme.md를 통해 확장 기능을 개발하는 방법을 알아볼 수 있습니다.

그리고 개발자 도구에서 다음 코드를 입력하면 확장 기능을 로드할 수 있습니다:

const BrowserWindow = require('electron').remote.BrowserWindow;
BrowserWindow.addDevToolsExtension('/some-directory/react-devtools/shells/chrome');

확장 기능을 언로드 하고 콘솔을 다시 열 때 해당 확장 기능이 로드되지 않도록 하려면 BrowserWindow.removeDevToolsExtension API를 사용하면 됩니다:

BrowserWindow.removeDevToolsExtension('React Developer Tools');

개발자 도구 확장 기능의 구성 형식

모든 개발자 도구 확장은 완벽히 Chrome 브라우저를 위해 작성되었기 때문에 Electron에서도 로드할 수 있습니다. 하지만 반드시 확장 기능은 소스 코드 디렉터리(폴더) 형태여야 합니다. 그래서 crx 등의 포맷으로 패키징된 확장 기능의 경우 사용자가 직접 해당 패키지의 압축을 풀어서 로드하지 않는 이상 Electron에서 해당 확장 기능의 압축을 풀 방법이 없습니다.

백그라운드 페이지

현재 Electron은 Chrome에서 지원하는 백그라운드 페이지(background pages)를 지원하지 않습니다. 몇몇 확장 기능은 이 기능에 의존하는 경우가 있는데, 이 때 해당 확장 기능은 Electron에서 작동하지 않을 수 있습니다.

chrome.* API

몇몇 Chrome 확장 기능은 특정 기능을 사용하기 위해 chrome.* API를 사용하는데, 이 API들을 구현하기 위해 노력했지만 안타깝게도 아직 모든 API가 구현되지는 않았습니다.

아직 모든 API가 구현되지 않았기 때문에 확장 기능에서 chrome.devtools.* 대신 chrome.* API를 사용할 경우 확장 기능이 제대로 작동하지 않을 수 있음을 감안해야 합니다. 만약 문제가 발생할 경우 Electron의 GitHub 저장소에 관련 이슈를 올리면 해당 API를 추가하는데 많은 도움이 됩니다.