debug

Debugging in Visual Studio Code⚑

TL;DR⚑

• https://code.visualstudio.com/docs/editor/debugging
• .vscode 폴더 하위에 launch.json 파일에 디버깅 구성을 작성 후 디버거 실행하면 됨

기본 구조⚑

launch.json은 다음과 같은 JSON 구조로 작성됩니다.

{
  "version": "0.2.0",
  "configurations": []
}

• version: launch.json 파일의 버전을 지정합니다. 현재 버전은 0.2.0입니다.
• configurations: 디버깅 설정의 배열입니다. 여러 개의 설정을 추가할 수 있으며, 각 설정은 하나의 디버그 구성입니다.

주요 필드⚑

1. type

   • 디버거의 종류를 지정합니다. 예를 들어 python, node, cppdbg 등이 있습니다.
   • 예시: "type": "python"

2. request

   • 실행 요청의 종류를 지정합니다.
   • launch: 프로그램을 시작하고 디버깅할 때 사용됩니다.
   • attach: 이미 실행 중인 프로세스에 연결하여 디버깅할 때 사용됩니다.
   • 예시: "request": "launch"

3. name

   • 이 구성의 이름입니다. 디버깅 구성 메뉴에서 이 이름이 표시됩니다.
   • 예시: "name": "Python: Current File"

4. program

   • 실행할 프로그램의 경로입니다. 주로 Python 파일이나 Node.js 프로그램 파일을 지정합니다.
   • 예시: "program": "${workspaceFolder}/app.py"

5. args

   • 프로그램에 전달할 명령줄 인수입니다. 배열로 여러 인수를 제공할 수 있습니다.
   • 예시: "args": ["arg1", "arg2"]

6. cwd

   • 프로그램을 실행할 때 사용할 작업 디렉터리입니다.
   • 예시: "cwd": "${workspaceFolder}"

7. env

   • 프로그램 실행 시 설정할 환경 변수를 정의합니다. 객체로 지정되며, 각 키는 환경 변수 이름이고 값은 해당 값입니다.
   • 예시:

   "env": {
     "ENV_VAR1": "value1",
     "ENV_VAR2": "value2"
   }
   

8. envFile

   • 환경 변수를 로드할 .env 파일을 지정합니다.
   • 예시: "envFile": "${workspaceFolder}/.env"

9. console

   • 디버그 콘솔의 출력을 어디에 표시할지 지정합니다.
   • integratedTerminal: VS Code 통합 터미널에서 실행
   • externalTerminal: 외부 터미널에서 실행
   • 예시: "console": "integratedTerminal"

10. stopOnEntry

    • 프로그램이 시작할 때 자동으로 일시 정지할지를 지정합니다.
    • true: 첫 번째 명령에서 프로그램이 일시 정지합니다.
    • false: 자동으로 시작합니다.
    • 예시: "stopOnEntry": false

11. justMyCode

    • Python 코드에서 사용자 코드만 디버깅할지 여부를 지정합니다. 외부 라이브러리의 코드에서 중단점을 무시하려면 true로 설정합니다.
    • 예시: "justMyCode": true

12. sourceMaps

    • 소스 맵을 사용할지 여부를 설정합니다. 주로 TypeScript, JavaScript에서 사용되며, 트랜스파일된 코드와 원본 소스 코드를 매핑합니다.
    • 예시: "sourceMaps": true

13. preLaunchTask

    • 프로그램이 시작되기 전에 실행할 작업을 정의합니다. 이는 주로 tasks.json에서 정의된 작업입니다.
    • 예시: "preLaunchTask": "npm: build"

14. postDebugTask

    • 디버깅이 끝난 후 실행할 작업을 지정합니다.
    • 예시: "postDebugTask": "cleanup"

15. attach (request가 attach일 때)

    • 실행 중인 프로세스에 연결할 때 사용합니다. 프로세스 ID 또는 원격 디버깅 포트 등을 지정할 수 있습니다.
    • 예시:

    "processId": "${command:PickProcess}",
    "port": 9229
    

16. port

    • 원격 디버깅할 때 연결할 포트를 지정합니다.
    • 예시: "port": 9229

17. outFiles

    • 소스 맵이 존재하는 파일 또는 파일 패턴을 지정합니다. 주로 Node.js 또는 TypeScript 디버깅에 사용됩니다.
    • 예시: "outFiles": ["${workspaceFolder}/dist/**/*.js"]

18. skipFiles

    • 디버깅 중 건너뛸 파일 패턴을 지정합니다. 이는 주로 라이브러리 코드나 관심 없는 파일을 건너뛰기 위해 사용됩니다.
    • 예시:

    "skipFiles": [
      "<node_internals>/**",
      "node_modules/**"
    ]
    

필수 속성⚑

모든 디버깅 구성에서 사용 가능한 선택적 속성⚑

다수 디버거에서 지원하는 속성⚑

언어별 주요 필드 예시⚑

Python 예시⚑

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Python: Current File",
      "type": "python",
      "request": "launch",
      "program": "${file}",
      "console": "integratedTerminal"
    }
  ]
}

Node.js 예시⚑

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Program",
      "program": "${workspaceFolder}/app.js",
      "console": "integratedTerminal"
    }
  ]
}

Go 예시⚑

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "REST",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "cmd/server/main.go",
      "cwd": "${workspaceFolder}"
    },
    {
      "name": "gRPC",
      "type": "go",
      "request": "launch",
      "mode": "auto",
      "program": "cmd/grpc/main.go",
      "cwd": "${workspaceFolder}"
    }
  ]
}

C++ 예시⚑

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "C++ Launch",
      "type": "cppdbg",
      "request": "launch",
      "program": "${workspaceFolder}/a.out",
      "args": [],
      "stopAtEntry": false,
      "cwd": "${workspaceFolder}",
      "environment": [],
      "externalConsole": true,
      "MIMode": "gdb",
      "setupCommands": [
        {
          "description": "Enable pretty-printing for gdb",
          "text": "-enable-pretty-printing",
          "ignoreFailures": true
        }
      ]
    }
  ]
}

Attach vs Launch⚑

• launch와 attach는 VS Code에서 디버깅할 때 사용하는 두 가지 주요 모드로, 디버거가 프로그램과 어떻게 상호작용하는지를 결정

1. Launch 모드⚑

• VS Code가 프로그램을 직접 실행하고 디버그
• 디버거가 프로세스의 시작 단계부터 관리
• 개발자가 앱 실행부터 디버깅까지 모두 VS Code 내에서 관리하고자 할 때 유용

사용 사례⚑

• 서버, 데스크톱 앱, CLI 도구를 개발할 때, VS Code에서 프로그램을 실행하며 디버깅하고 싶을 때.
• 예를 들어:
  • Go 프로그램, Python 스크립트, Node.js 서버를 VS Code에서 직접 실행.
  • 브라우저를 열 필요 없이, 브라우저 없는 환경에서 동작하는 앱.

구성 방식⚑

• launch.json 파일에 디버깅 대상의 실행 경로와 환경 설정을 작성

{
  "type": "node",
  "request": "launch",
  "name": "Launch Program",
  "program": "${workspaceFolder}/app.js" // 실행 파일 경로
}

동작 방식⚑

1. VS Code가 앱 실행 명령을 내림
2. 앱은 디버그 모드로 시작됨
3. 디버거가 처음부터 앱의 모든 동작을 추적

2. Attach 모드⚑

• 이미 실행 중인 앱이나 외부에서 실행된 프로세스에 VS Code 디버거를 연결
• 디버거는 프로그램이 실행 중일 때 중단점 설정, 변수 추적 등 디버깅 작업만 수행
• 프로세스를 실행하지 않음

사용 사례⚑

• 브라우저나 다른 환경에서 이미 실행 중인 앱 디버깅.
• 서버, 컨테이너, 또는 리모트 머신에서 실행 중인 앱에 디버거를 연결하고 싶을 때.
• 예를 들어:
  • 브라우저에서 실행 중인 웹 앱의 JavaScript를 디버깅.
  • Docker 컨테이너에서 실행 중인 Node.js 서버를 디버깅.

구성 방식⚑

launch.json 파일에 실행 중인 프로세스의 디버깅 포트와 연결 정보를 작성

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Process",
  "port": 9229, // 디버깅 포트
  "address": "localhost"
}

동작 방식⚑

1. 앱은 이미 실행 중이어야 함.
2. 디버거가 지정된 포트나 프로세스에 연결.
3. 디버깅 작업(중단점 설정, 변수 추적)을 진행.

3. 차이점 요약⚑

4. 실제 예제⚑

Launch 모드: Node.js 앱 실행 및 디버깅⚑

• VS Code에서 Node.js 앱 실행 후 디버깅.

{
  "type": "node",
  "request": "launch",
  "name": "Launch Node.js App",
  "program": "${workspaceFolder}/server.js"
}

Attach 모드: Docker 컨테이너에서 실행 중인 Node.js 서버 디버깅⚑

• Docker 컨테이너 내에서 실행 중인 Node.js 서버에 연결.

{
  "type": "node",
  "request": "attach",
  "name": "Attach to Node.js in Docker",
  "port": 9229,
  "address": "localhost",
  "localRoot": "${workspaceFolder}",
  "remoteRoot": "/usr/src/app" // 컨테이너 내 경로
}

5. 브라우저 개발 vs 서버 개발에서의 차이⚑

• 브라우저 개발자:
  • 이미 브라우저에서 실행 중인 앱에 DevTools처럼 연결하는 방식(attach)이 익숙.
  • 브라우저의 디버깅 포트(예: 9222)로 연결.
• 서버/데스크톱 개발자:
  • 프로그램을 편집기에서 실행(launch)하며 디버거와 함께 시작하는 워크플로를 선호.