애플리케이션의 디버깅을 쉽게 하기 위해 Electron은 기본적으로 Chrome DevTools Extension을 지원합니다.
Electron은 유명한 웹 프레임워크를 디버깅하기 위해 사용할 수 있는 개발자 도구 확장 기능을 사용할 수 있도록 Chrome 개발자 도구 확장 기능을 지원합니다.
이 문서는 확장 기능을 수동으로 로드하는 방법의 과정을 설명합니다. electron-devtools-installer와 같은 Chrome WebStore에서 자동으로 확장 기능을 다운로드하는 서드-파티 도구를 사용할 수도 있습니다.
Electron에 확장 기능을 로드하려면, Chrome 브라우저에서 다운로드 해야 하며, 파일 시스템
경로를 지정해야 합니다. 그리고 BrowserWindow.addDevToolsExtension(extension)를
호출함으로써 기능을 로드할 수 있습니다.
예시로 React Developer Tools를 사용한다면:
chrome://extensions로 이동한 후 해시된 fmkadmapgofadopljbjfkapdkoienihi
같이 생긴 확장 기능의 ID를 찾습니다.%LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions;~/.config/google-chrome/Default/Extensions/~/.config/google-chrome-beta/Default/Extensions/~/.config/google-chrome-canary/Default/Extensions/~/.config/chromium/Default/Extensions/~/Library/Application Support/Google/Chrome/Default/Extensions.BrowserWindow.addDevToolsExtension API로 전달합니다.
React Developer Tools의 경우 다음과 비슷해야 합니다:
~/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/0.15.0_0참고: BrowserWindow.addDevToolsExtension API는 app 모듈의 ready 이벤트가
발생하기 전까지 사용할 수 없습니다.
확장 기능의 이름은 BrowserWindow.addDevToolsExtension에서 반환되며, 이 이름을
BrowserWindow.removeDevToolsExtension API로 전달함으로써 해당하는 확장 기능을
언로드할 수 있습니다.
Electron은 아주 제한적인 chrome.* API만을 지원하므로 확장 기능이 지원하지 않는
chrome.* API를 사용한다면 해당 기능은 작동하지 않을 것입니다. 다음 개발자 도구들은
Electron에서 정상적으로 작동하는 것을 확인했으며 작동 여부를 보장할 수 있는 확장
기능입니다:
먼저 해당 확장 기능이 확실히 계속 유지되고 있는지를 확인하세요. 몇몇 확장 기능들은 최신 버전의 Chrome 브라우저에서도 작동하지 않습니다. 그리고 이러한 확장 기능에 대해선 Electron 개발팀에 해줄 수 있는 것이 아무것도 없습니다.
위와 같은 상황이 아니라면 Electron의 이슈 리스트에 버그 보고를 추가한 후 예상한 것과 달리 확장 기능의 어떤 부분의 정상적으로 작동하지 않았는지 설명하세요.