VS Code 디버깅 기능 100% 활용하기! 코드 오류 잡는 법

VS Code 디버깅(Debugging)

 

1. 디버깅(Debugging)이란?

디버깅은 프로그램 속의 오류(Bug)를 찾아 고치는 과정이에요.
VS Code는 아주 강력한 디버깅 기능을 갖추고 있어서, 오류 위치를 직접 확인하고 변수 상태도 볼 수 있어요.

---

2. VS Code에서 디버깅 시작하기

왼쪽 사이드바의 벌레 아이콘(🐞) 또는 실행 및 디버그 클릭
→ 언어에 맞는 디버거가 없으면 VS Code가 자동으로 설치 안내를 해줘요.

---

3. launch.json 파일 설정 (자동 생성 가능)

디버깅 환경을 세팅하면 .vscode/launch.json 파일이 만들어져요.
(자동으로 생성되기 때문에 초보자는 설정 없이 시작해도 OK!)

예시 (JavaScript 디버깅 설정):

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "디버그 시작",
      "program": "${file}"
    }
  ]
}

 

---

4. 중단점(Breakpoint) 설정하기

오류가 의심되는 코드 줄 번호 클릭하면 ● 표시
→ 디버깅을 실행하면 해당 줄에서 실행이 ‘멈춰서’ 변수 상태 등을 확인할 수 있어요.

---

5. 변수 값 확인 & 코드 흐름 추적

디버깅 중에는 왼쪽 패널에 변수, 호출 스택, 감시 등이 표시돼요.
이걸 통해 어떤 값이 들어오는지, 흐름이 어디서 꼬였는지 확인할 수 있어요.

---

6. 디버깅 단축키 꿀팁

• F5: 디버그 시작
• F10: 다음 줄 실행(Step Over)
• F11: 함수 안으로 들어가기(Step Into)
• Shift + F5: 디버그 종료

---

7. 마무리 한 마디

디버깅은 처음엔 어렵지만, 익숙해지면 오류가 생겨도 당황하지 않게 되는 최고의 기술입니다!
VS Code의 디버깅 기능은 꼭 익혀두면 실무에서도 많은 도움이 됩니다 🔧🐛