[번역] VSCode에서 Electron의 메인 프로세스와 렌더러 프로세스를 동시에 디버깅하는 방법

이것은 Electron debugging (main and renderer process)의 번역입니다. Electron에는 NodeJS 내에서 실행되는 메인 프로세스(Main process)와 Chromium 내에서 실행되는 렌더러 프로세스(Renderer process)라는 2 종류의 프로세스가 있어, 각각에 다른 디버거를 이용할 필요가 있습니다. 이 기사에서는 VSCode를 사용하여이 두 프로세스를 동시에 디버깅하는 방법을 소개합니다.

참고 : 디버거는 Inspector 프로토콜에 의존하므로 Electron 1.7.4 이상을 사용해야합니다.

먼저


  • 최신 VSCode가 설치되어 있는지 확인하십시오
  • VSCode에 최신 Debugger for Chrome이 설치되어 있는지 확인하십시오
  • 이 가이드는 electron-Quick-start project 의 이용을 상정하고 있습니다. 먼저 저장소를 clone하십시오
  • git clone https://github.com/electron/electron-quick-start.git
    cd electron-quick-start
    npm install
    code .
    

    launch.json 파일 설정


  • 액티비티 바에서 디버그 아이콘을 클릭하여 디버그 뷰를 표시하십시오. 그런 다음 launch.json 파일을 설정하려면 톱니 바퀴 아이콘을 클릭하고 Chrome을 환경으로 선택합니다.

  • 생성 된 launch.json 파일의 내용을 다음 두 가지 설정으로 바꿉니다.
      {
          "version": "0.2.0",
          "configurations": [
              {
                  "type": "node",
                  "request": "launch",
                  "name": "Electron: Main",
                  "protocol": "inspector",
                  "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron",
                  "runtimeArgs": [
                      "--remote-debugging-port=9223",
                      "."
                  ],
                  "windows": {
                      "runtimeExecutable": "${workspaceRoot}/node_modules/.bin/electron.cmd"
                  }
              },
              {
                  "name": "Electron: Renderer",
                  "type": "chrome",
                  "request": "attach",
                  "port": 9223,
                  "webRoot": "${workspaceRoot}",
                  "timeout": 30000
              }
          ],
          "compounds": [
              {
                  "name": "Electron: All",
                  "configurations": [
                      "Electron: Main",
                      "Electron: Renderer"
                  ]
              }
          ]
      }
    

    메인 프로세스 디버깅


  • main.js의 16 행, createWindow 함수에 중단 점을 설정하십시오.
  • 디버그보기를 열고 'Electron : Main'구성을 선택하고 F5 키를 누르거나 녹색 재생 버튼을 클릭하십시오.
  • VSCode가 Electron 응용 프로그램을 시작하고 main.js의 16 행에서 중단 점이 히트해야합니다.


  • 렌더러 프로세스 디버깅



  • renderer.js를 다음 내용으로 업데이트하십시오.
       // This file is required by the index.html file and will
       // be executed in the renderer process for that window.
       // All of the Node.js APIs are available in this process.
    
       function test() {
           console.log('test')
       }
    
       test()
    
  • 디버그 세션이 실행되는 동안 디버그 뷰를 열고 'Electron : Renderer'구성을 선택할 수 있습니다. 이것은 VSCode를 Electron 렌더러 프로세스에 연결합니다.
  • 연결되면 renderer.js를 열고 중단 점을 여섯 번째 줄로 설정하십시오.
  • Electron 응용 프로그램 창을 열고 중단 점이 설정되도록 페이지를 다시로드 (View -> reload 또는 CMD + R)하십시오
  • renderer.js의 여섯 번째 줄의 중단 점이 히트해야합니다. 이제 렌더러 프로세스를 디버깅할 수 있습니다.

  • 두 프로세스를 동시에 디버깅



    메인 프로세스와 렌더러 프로세스를 모두 디버깅하는 법을 배웠으므로 두 디버그 세션을 동시에 시작하는 혼합 구성의 장점을 활용할 수 있습니다.
  • 디버그 뷰를 열고 'Electron : All'구성을 선택하십시오. 이것은 VSCode를 메인 프로세스와 렌더러 프로세스 모두에 연결하여 부드러운 개발 흐름을 가능하게합니다.
  • 중단 점을 파일의 아무 곳이나 설정하십시오.
  • 재미 🎉🔥
  • 좋은 웹페이지 즐겨찾기