VSCode에서 Electron + React 디버깅 설정하기

김기영·2024년 3월 27일

0.

프론트 엔드 개발을 하다 보면 개인적으로는 사실 상 console.log를 사용 하여 해결하다 보니, 개별적으로 brackpoint를 걸어서 확인을 할 일이 잘 없었다.
(아직까지 작업한 기능이 그렇게 복잡하지 않아서 그럴수도..?)

진행중인 프로젝트에서는 electron + react를 쓰게 되면서, electron (main) 부분에 대한 디버깅이 가끔 필요했다.
이 역시 터미널에 콘솔이 찍히긴 했으나, 콘솔로 확인 불가능한 부분이 생겨서, 디버깅을 위해 설정한 부분을 공유한다.

1.

해당 방식은 지극히 프로젝트의 설정에 따라 달라질 수 있다.

베이스 구성은 아래와 같다.

Electron
React
~~Typescript~~ ( 딱히 관련해서 영향을 주는 설정은 없었던 듯하다.)
yarn ( npm 이나 다른것도 테스트는 안해 봤지만 바꿔주면 될 듯 함)

vscode 사용자만 해당한다.

다른 IDE도 될 수 있지만 확인한 부분은 아니므로...

launch.json

프로젝트 디렉토리 폴더를 보면 다음과 같은 폴더가 있다.

.vscode

하위에 launch.json 파일을 새로 추가한다.

각 설정 값은 다 조사하지 못했다. 테스트하면서 알게된 내용에 대해 주석으로 작성했다. (개발에 도움을 주는 요소라 개발처럼 하나하나 파진 않았다.)
정확하지 않은 것에는 설명을 추가하지 않았다.

{

  "version": "0.2.0",
  "configurations": [
    {
      "name": "Electron: Main",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "yarn", // script에서 사용하는 시작 명령어   
      "runtimeArgs": [
        "start-main-debug" // yarn start 로 치면 start에 해당(정의한 스크립트 명령어)
      ],
      "env": {
        "PORT": "3000" // 사용하는 port , ex)localhost:3000 의 3000
      },
    }, // main 프로세스 설정
    {
      "name": "Electron: Renderer",
      "type": "chrome",
      "request": "attach",
      "port": 9223, // 브라우저에서 디버깅을 위한 port라고 한다. 
      "webRoot": "${workspaceFolder}",
      "timeout": 100000 // 100000 or 1000000 해당 부분은 조정이 가능함 
    } // Renderer 프로세스 설정 
  ],
  "compounds": [
    {
      "name": "Electron: All",
      "configurations": [
        "Electron: Renderer",
        "Electron: Main"
      ]
    }
  ]
}

package.json

launch.json 내부에 script 관련 내용이 들어가 있기 때문에 위의 내용은 본인 프로젝트의 package.json 의 script 부분을 확인해야 한다.

위의 luncher.json 의 "start-main-debug" 의 내용이 package.json안에 이런식으로 있어야 한다. (이름은 상관없음)


{
  "scripts": {
    ...
    "start-main-debug": "concurrently \"cross-env BROWSER=none yarn react-start\" \"wait-on http://localhost:3000 && electron . --inspect=5858  --remote-debugging-port=9223\""
    ...
  },
}

--inspect=5858