VSCode에서 디버깅하는 방법: 초보자 가이드

다음은 딥스푼 유튜브 강의를 참고하여 작성한 글입니다.

 

### VSCode에서 디버깅하는 방법: 초보자 가이드  

**Visual Studio Code(이하 VSCode)**는 강력한 디버깅 도구를 제공하여 개발자가 오류를 효율적으로 찾고 수정할 수 있도록 도와줍니다. 개발하다보면 변수들이 의도에 맞게 작성한 것이 맞는지 확인하는 과정이 필요한데 모든 변수들을 프린트하는 것은 현실적으로 불가능합니다. 이 글에서는 VSCode에서 디버깅을 시작하는 방법과 주요 기능을 단계별로 알아보겠습니다.  

---

### 1. 디버깅 환경 설정  
먼저 디버깅하려는 언어와 관련된 확장팩을 설치해야 합니다. 예를 들어, Python 코드의 디버깅을 위해 Python 확장팩을 설치하세요.  

#### 1.1. 확장팩 설치  
1. VSCode 왼쪽의 **Extensions** 아이콘 클릭(또는 `Ctrl+Shift+X` 단축키).  
2. 검색창에 해당 언어 입력(e.g., Python, JavaScript).  
3. 필요한 확장팩 설치.  

#### 1.2. 디버깅 환경 확인  
1. 코드 파일을 열고 **F5**를 눌러 디버깅을 시도합니다.  
2. 디버깅 설정 파일(`launch.json`)이 없으면 자동 생성 여부를 묻습니다.  
3. 사용할 환경을 선택(e.g., Python, Node.js).  

---

### 2. 디버깅 파일 및 구성 설정  

VSCode는 **`launch.json`** 파일을 통해 디버깅 구성을 저장합니다.  
1. VSCode 왼쪽 **Run and Debug** 아이콘 클릭(또는 `Ctrl+Shift+D`).  
2. 상단의 **Create a launch.json file** 버튼 클릭.  
3. 프로젝트 환경에 맞는 디버깅 구성 선택.  
   - Python: `Python: Current File`.  

`launch.json` 예제:  
```json

{

// Use IntelliSense to learn about possible attributes.

// Hover to view descriptions of existing attributes.

// For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

"version": "0.2.0",

"configurations": [

{

"name": "Python Debugger: Current File",

"type": "debugpy",

"request": "launch",

"program": "${file}",

"console": "integratedTerminal"

},

{

"name": "Python Debugger: myDebug",

"type": "debugpy",

"request": "launch",

"program": "${workspaceFolder}${pathSeparator}debuging_test.py", //pathseperator가 경로 구분자를 mac, window 통용하여 쓸 수 있게 함

"console": "integratedTerminal", //내장된 터미널 사용

"justMyCode": false, //오픈한 폴더 이외의 폴더의 변수들도 사용하겠다. 꼭 false사용 추천

"cwd" : "${workspaceFolder}", //working directory

"env": {"CUDA_VISIBLE_DEVICES" : "0"}, //gpu 사용 인덱스

"args":[

"--arg1", "arg1_value", //추가적으로 받아야하는 시스템 argument, 없다면 자동으로 무시됌

"--arg2", "arg2_value"

]

}

]

}

```  

---

### 3. 디버깅 시작  
#### 3.1. 중단점 설정  
- 중단점(Breakpoint)은 코드 실행을 특정 지점에서 멈추게 하는 기능입니다.  
- 중단점을 설정하려면:  
  1. 디버깅할 코드 파일 열기.  
  2. 중단하고 싶은 줄 번호 옆을 클릭하여 빨간 점 추가.  
  3. 다시 클릭하면 중단점 해제.  

#### 3.2. 디버깅 실행  
1. **F5**를 눌러 디버깅 시작.  
2. 디버깅이 시작되면, 코드가 중단점에서 멈춥니다.  

 

디버그 모드에서 다음과 같이 실행이 가능합니다.

#### 3.3. 디버깅 제어  
디버깅 도중 아래 버튼으로 실행 흐름을 제어할 수 있습니다:  
- **Continue(F5)**: 다음 중단점까지 실행.  
- **Step Over(F10)**: 현재 줄을 실행하고 다음 줄로 이동.  
- **Step Into(F11)**: 함수 내부로 진입하여 디버깅.  
- **Step Out(Shift+F11)**: 현재 함수에서 빠져나옴.  
- **Restart(Ctrl+Shift+F5)**: 디버깅 재시작.  
- **Stop(Shift+F5)**: 디버깅 종료.  

---

### 4. 디버깅 주요 기능  

#### 4.1. 변수 확인  
- 디버깅 중 현재 변수 값을 실시간으로 확인할 수 있습니다.  
- **Variables** 패널에서 로컬 변수와 전역 변수 값을 확인하세요.  

#### 4.2. Watch 사용  
- 특정 변수 또는 표현식을 추가로 모니터링하려면:  
  1. **Variables** 패널에서 **Add to Watch** 클릭.  
  2. 원하는 변수를 입력하여 값을 추적.  

#### 4.3. Call Stack  
- 현재 실행 중인 함수 호출 스택을 확인하고 코드의 흐름을 파악할 수 있습니다.  

#### 4.4. Breakpoints 관리  
- **Breakpoints** 패널에서 모든 중단점을 관리하고 조건을 추가할 수 있습니다.  
  - 조건부 중단점: 특정 조건에서만 중단하려면 **조건 추가**.  

---

### 5. 디버깅 팁  

1. **콘솔 출력 활용**  
   - 통합 터미널(Console)에서 프로그램 출력과 오류 메시지를 확인하세요.  
2. **조건부 중단점 사용**  
   - 특정 상황에서만 실행을 멈추고 싶다면 조건부 중단점을 설정하세요.  
3. **디버깅 로그 추가**  
   - 중단점 대신 로그 메시지를 출력하여 흐름을 추적할 수 있습니다.  
4. **디버깅 단축키**  
   - VSCode 디버깅 단축키를 익히면 효율적으로 작업할 수 있습니다.  

---

### 6. 마무리  

VSCode에서 디버깅은 효율적이고 직관적입니다. 중단점 설정, 변수 확인, 함수 호출 스택 분석 등 다양한 기능을 통해 코드를 더 잘 이해하고 문제를 해결할 수 있습니다. 디버깅이 처음에는 복잡하게 느껴질 수 있지만, 차근차근 사용하다 보면 빠르고 효율적으로 문제를 해결할 수 있을 것입니다.  

즐겁고 효과적인 디버깅 하세요! 😊