DevTools 확장 기능

Electron은 [Chrome DevTools 확장 기능][devtools-extension]을 지원한다. 이를 통해 Chrome 개발자 도구의 기능을 확장하여 인기 있는 웹 프레임워크를 디버깅할 수 있다.

개발자 도구 확장 프로그램을 도구로 로드하기

DevTools 확장 프로그램을 로드하는 가장 쉬운 방법은 프로세스를 자동화해 주는 서드파티 도구를 사용하는 것이다. [electron-devtools-installer][electron-devtools-installer]는 이를 수행하는 인기 있는 NPM 패키지다.

DevTools 확장 프로그램을 수동으로 로드하기

도구를 사용하지 않고도 필요한 모든 작업을 수동으로 수행할 수 있다. Electron에서 확장 프로그램을 로드하려면 Chrome을 통해 다운로드하고, 파일 시스템 경로를 찾은 다음 [ses.loadExtension][load-extension] API를 호출해 [Session][session]에 로드해야 한다.

[React Developer Tools][react-devtools]를 예로 들어보자:

1. Google Chrome에서 확장 프로그램을 설치한다.

2. chrome://extensions로 이동해 확장 프로그램 ID를 확인한다. 이 ID는 fmkadmapgofadopljbjfkapdkoienihi와 같은 해시 문자열이다.

3. Chrome이 확장 프로그램을 저장하는 파일 시스템 위치를 찾는다:

   • Windows에서는 %LOCALAPPDATA%\Google\Chrome\User Data\Default\Extensions
   • Linux에서는 다음 중 하나일 수 있다:
     • ~/.config/google-chrome/Default/Extensions/
     • ~/.config/google-chrome-beta/Default/Extensions/
     • ~/.config/google-chrome-canary/Default/Extensions/
     • ~/.config/chromium/Default/Extensions/
   • macOS에서는 ~/Library/Application Support/Google/Chrome/Default/Extensions

4. 확장 프로그램의 위치를 [ses.loadExtension][load-extension] API에 전달한다. React Developer Tools v4.9.0의 경우 다음과 같다:

   const { app, session } = require('electron')
   const path = require('node:path')
   const os = require('node:os')
   
   // macOS에서
   const reactDevToolsPath = path.join(
     os.homedir(),
     '/Library/Application Support/Google/Chrome/Default/Extensions/fmkadmapgofadopljbjfkapdkoienihi/4.9.0_0'
   )
   
   app.whenReady().then(async () => {
     await session.defaultSession.loadExtension(reactDevToolsPath)
   })

참고 사항:

• loadExtension은 로드된 확장 프로그램에 대한 메타데이터를 포함하는 [Extension 객체][extension-structure]를 반환하는 Promise를 반환한다. 이 Promise는 페이지를 로드하기 전에 resolve되어야 한다(예: await 표현식 사용). 그렇지 않으면 확장 프로그램이 제대로 로드되지 않을 수 있다.
• loadExtension은 app 모듈의 ready 이벤트가 발생하기 전에 호출할 수 없으며, 메모리 내(비영구적) 세션에서도 호출할 수 없다.
• 앱을 부팅할 때마다 확장 프로그램을 로드하려면 loadExtension을 호출해야 한다.

DevTools 확장 프로그램 제거하기

확장 프로그램의 ID를 [ses.removeExtension][remove-extension] API에 전달하면 세션에서 해당 확장 프로그램을 제거할 수 있다. 로드된 확장 프로그램은 앱을 다시 실행할 때까지 유지되지 않는다.

DevTools 확장 지원

Electron은 [지원되는 chrome.* API 집합][supported-extension-apis]만 제공한다. 따라서 지원되지 않는 chrome.* API를 사용하는 확장 프로그램은 동작하지 않을 수 있다.

다음 DevTools 확장 프로그램은 Electron에서 동작하는 것이 테스트되었다:

• Ember Inspector
• React Developer Tools
• Backbone Debugger
• jQuery Debugger
• AngularJS Batarang
• Vue.js devtools
• Cerebral Debugger
• Redux DevTools Extension
• MobX Developer Tools

DevTools 확장 프로그램이 작동하지 않을 때는 어떻게 해야 할까요?

먼저, 해당 확장 프로그램이 여전히 유지보수 중인지, 그리고 최신 버전의 Google Chrome과 호환되는지 확인하세요. 지원이 중단된 확장 프로그램에 대해서는 추가적인 지원을 제공할 수 없습니다.

확장 프로그램이 Chrome에서는 작동하지만 Electron에서는 작동하지 않는 경우, Electron의 [이슈 트래커][issue-tracker]에 버그를 제출하세요. 그리고 확장 프로그램의 어떤 부분이 예상대로 작동하지 않는지 상세히 설명하세요.