Skip to main content

VSCode에서 디버깅하기

이 가이드에서는 여러분의 Electron 프로젝트와 네이티브 Electron 코드베이스 모두를 대상으로 VSCode에서 디버깅을 설정하는 방법을 설명한다.

Electron 앱 디버깅하기​

메인 프로세스​

1. VSCode에서 Electron 프로젝트 열기​

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. .vscode/launch.json 파일을 아래 설정으로 추가한다:​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Debug Main Process",
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}",
      "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron",
      "windows": {
        "runtimeExecutable": "${workspaceFolder}/node_modules/.bin/electron.cmd"
      },
      "args" : ["."],
      "outputCapture": "std"
    }
  ]
}

3. 디버깅​

main.js 파일에 중단점을 설정하고 디버그 뷰에서 디버깅을 시작한다. 중단점에 도달할 수 있어야 한다.

다음은 VSCode에서 바로 디버깅할 수 있는 미리 구성된 프로젝트이다: https://github.com/octref/vscode-electron-debug/tree/master/electron-quick-start

Electron 코드베이스 디버깅​

Electron을 소스 코드로 빌드하고 네이티브 Electron 코드베이스를 수정하려는 경우, 이 섹션은 수정 사항을 테스트하는 데 도움을 준다.

코드를 어디서 가져오고 어떻게 빌드해야 할지 모르는 경우, Electron의 빌드 도구가 대부분의 과정을 자동화하고 설명한다. 환경을 수동으로 설정하려면 빌드 지침을 참고할 수 있다.

윈도우 환경 (C++)​

1. VSCode에서 Electron 프로젝트 열기​

$ git clone git@github.com:electron/electron-quick-start.git
$ code electron-quick-start

2. .vscode/launch.json 파일에 다음 설정을 추가한다:​

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "(Windows) Launch",
      "type": "cppvsdbg",
      "request": "launch",
      "program": "${workspaceFolder}\\out\\your-executable-location\\electron.exe",
      "args": ["your-electron-project-path"],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [
          {"name": "ELECTRON_ENABLE_LOGGING", "value": "true"},
          {"name": "ELECTRON_ENABLE_STACK_DUMPING", "value": "true"},
          {"name": "ELECTRON_RUN_AS_NODE", "value": ""},
      ],
      "externalConsole": false,
      "sourceFileMap": {
          "o:\\": "${workspaceFolder}",
      },
    },
  ]
}

설정 참고 사항

  • cppvsdbg는 내장 C/C++ 확장이 활성화되어 있어야 한다.
  • ${workspaceFolder}는 Chromium의 src 디렉토리의 전체 경로를 나타낸다.
  • your-executable-location은 몇 가지 조건에 따라 다음 중 하나가 된다:
    • Testing: Electron의 Build-Tools의 기본 설정을 사용하거나 소스에서 빌드할 때 기본 지침을 따른 경우.
    • Release: Testing 빌드 대신 Release 빌드를 생성한 경우.
    • your-directory-name: 빌드 과정에서 기본값을 수정한 경우, 여기에는 사용자가 지정한 디렉토리 이름이 들어간다.
  • args 배열의 문자열 "your-electron-project-path"는 테스트에 사용할 Electron 프로젝트의 디렉토리나 main.js 파일의 절대 경로여야 한다. 이 예제에서는 electron-quick-start의 경로를 지정해야 한다.

3. 디버깅​

선택한 .cc 파일에 중단점을 설정하고, Debug View에서 네이티브 Electron C++ 코드 디버깅을 시작한다.