VS Code 디버깅 사용법｜중단점·조건부 중단점·Logpoint 완전 정복

VS Code 실무 활용 시리즈

VS Code 디버깅
중단점부터 Logpoint까지

코드를 추측하며 고치지 않고, 실행 흐름과 변수 값을 직접 확인하는 방법

오류가 발생할 때마다 console.log()를 여러 줄 추가하고 있나요? VS Code 디버거를 사용하면 원하는 줄에서 실행을 멈추고, 변수와 호출 순서를 확인하며 한 줄씩 코드를 실행할 수 있습니다.

목차

1. 디버거를 사용하기 좋은 상황
2. 필수 디버깅 단축키
3. 기본 디버깅 따라 하기
4. 디버깅 화면 살펴보기
5. 조건부 중단점 활용
6. Logpoint 활용
7. launch.json 설정
8. F10과 F11 비교
9. 주의점과 문제 해결
10. 20분 연습 과제

한 줄 요약 중단점(Breakpoint)은 지정한 코드에 도달했을 때 실행을 일시 정지합니다. 멈춘 상태에서 변수, Watch 식, Call Stack을 확인하고 F10·F11로 실행 흐름을 따라갈 수 있습니다. VS Code 디버깅 공식 문서

1. 언제 디버거를 사용하면 좋을까?

• 값이 예상과 달라지는 정확한 시점을 찾고 싶을 때
• 반복문이 특정 데이터에서만 실패할 때
• 함수가 어떤 순서로 호출되는지 확인하고 싶을 때
• 오류가 가끔 발생해 로그만으로 원인을 찾기 어려울 때
• 소스에 임시 console.log()를 남기지 않고 값을 기록하고 싶을 때

언어별 디버거 지원 확인 VS Code에는 JavaScript·TypeScript·Node.js 디버거가 기본 포함됩니다. Python, C++, Java, Go 등은 해당 언어의 디버깅 확장이 필요합니다. 중단점 종류와 조건식 문법도 디버거 확장에 따라 달라질 수 있습니다. Debugger extensions 공식 안내

2. 꼭 알아둘 디버깅 단축키

기능	Windows	macOS	의미
Run and Debug 보기	Ctrl+Shift+D	⇧+⌘+D	디버깅 사이드바 열기
중단점 켜기/끄기	F9	F9	현재 줄에 중단점 설정
시작 / 계속	F5	F5	디버깅 시작 또는 다음 중단점까지 실행
한 단계 건너뛰기	F10	F10	호출되는 함수 내부로 들어가지 않고 다음 줄
함수 안으로 들어가기	F11	F11	호출되는 함수 내부를 한 줄씩 확인
함수 밖으로 나오기	Shift+F11	⇧+F11	현재 함수를 마치고 호출 위치로 복귀
다시 시작	Ctrl+Shift+F5	⇧+⌘+F5	현재 구성으로 디버깅 재시작
중지	Shift+F5	⇧+F5	디버깅 세션 종료
Debug Console	Ctrl+Shift+Y	⇧+⌘+Y	식 평가 및 로그 확인

단축키는 2026년 7월 21일 기준 공식 기본 단축키와 Debug actions 공식 표를 대조했습니다. 노트북에서는 Fn 키를 함께 눌러야 할 수 있습니다.

3. 처음 따라 하는 기본 디버깅

아래 코드를 app.js로 저장하면 Node.js 기본 디버거로 연습할 수 있습니다.

function calculateDiscount(price, rate) {
  const discount = price * rate;
  return price - discount;
}

const finalPrice = calculateDiscount(50000, 0.2);
console.log(finalPrice);

1중단점 설정

const discount = ... 줄에 커서를 놓고 F9를 누르거나 줄 번호 왼쪽 여백을 클릭합니다. 빨간 원이 표시됩니다.

2디버깅 시작

F5를 누르고 디버거 선택 화면이 나오면 Node.js를 고릅니다. 실행이 중단점에서 멈춥니다.

3값 확인

Run and Debug의 VARIABLES에서 price와 rate를 확인합니다. 코드의 변수 위에 마우스를 올려도 현재 값이 나타납니다.

4한 줄씩 진행

F10으로 다음 줄을 실행하고 discount 값이 만들어지는 과정을 봅니다. 함수 호출 내부를 보고 싶다면 F11을 사용합니다.

1. F9 멈출 곳 설정
2. F5 실행 시작
3. F10/F11 한 줄씩 확인
4. Shift+F5 세션 종료

Node.js 디버깅 공식 튜토리얼에서도 F9 중단점과 F5 시작 흐름을 확인할 수 있습니다.

4. 화면에서 무엇을 확인해야 할까?

영역	확인할 내용	사용 예
VARIABLES	현재 스코프의 변수와 값	함수 인수, 지역 변수, 객체 속성
WATCH	계속 추적할 식	items.length, user?.role
CALL STACK	현재 위치까지 호출된 함수 순서	어떤 경로로 문제가 난 함수에 도달했는지 확인
BREAKPOINTS	프로젝트에 설정된 중단점	전체 중단점 일괄 비활성화·삭제
DEBUG CONSOLE	로그 및 현재 스코프의 식 평가	price * rate를 입력해 즉시 계산

Debugger UI 공식 설명 · Data inspection 공식 설명

5. 실전 예제 1: 특정 데이터에서만 멈추기

주문이 많을 때 모든 반복에서 멈추면 비효율적입니다. 조건부 중단점을 사용해 고액 주문에서만 멈춰 보겠습니다.

const orders = [
  { id: 1, total: 25000 },
  { id: 2, total: 130000 },
  { id: 3, total: 42000 }
];

for (const order of orders) {
  const fee = order.total * 0.03;
  console.log(order.id, fee);
}

1. const fee = ... 줄의 왼쪽 여백을 마우스 오른쪽 버튼으로 클릭합니다.
2. Add Conditional Breakpoint를 선택합니다.
3. Expression에 order.total >= 100000을 입력합니다.
4. F5로 실행하면 id: 2 주문에서만 멈춥니다.

조건부 중단점의 세 가지 방식 표현식이 참일 때 멈추는 Expression, 지정 횟수만큼 통과한 뒤 멈추는 Hit Count, 다른 중단점이 먼저 실행되어야 활성화되는 Wait for Breakpoint가 있습니다. 지원 여부와 Hit Count 문법은 디버거에 따라 다릅니다. Conditional breakpoints 공식 문서

6. 실전 예제 2: 코드를 수정하지 않고 로그 남기기

Logpoint는 실행을 멈추지 않고 Debug Console에 메시지를 기록하는 중단점입니다. 임시 로그를 코드에 추가하고 지우는 일을 줄여 줍니다.

1. const fee = ... 줄의 왼쪽 여백을 마우스 오른쪽 버튼으로 클릭합니다.
2. Add Logpoint를 선택합니다.
3. 주문 {order.id}, 금액 {order.total}을 입력합니다.
4. F5로 실행하고 Debug Console의 출력 내용을 확인합니다.

주문 1, 금액 25000
주문 2, 금액 130000
주문 3, 금액 42000

중괄호 안의 표현식은 실행 시점의 값으로 평가됩니다. Logpoint는 다이아몬드 모양으로 표시되며, 디버거 확장이 이 기능을 지원해야 합니다. Logpoints 공식 문서

7. 실전 예제 3: launch.json으로 실행 조건 저장하기

단순 파일은 F5만으로 실행할 수 있지만, 시작 파일·인수·환경 변수 등을 반복해서 사용한다면 .vscode/launch.json에 저장하는 편이 좋습니다.

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Debug app.js",
      "program": "${workspaceFolder}/app.js",
      "cwd": "${workspaceFolder}",
      "args": ["--mode", "development"],
      "env": {
        "LOG_LEVEL": "debug"
      },
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

1. Ctrl+Shift+D 또는 macOS ⇧+⌘+D로 Run and Debug를 엽니다.
2. create a launch.json file을 선택한 뒤 Node.js 환경을 선택합니다.
3. 생성된 설정을 위 예제처럼 수정하고 구성 목록에서 Debug app.js를 선택합니다.
4. F5로 실행합니다.

type, request, name은 모든 launch 구성의 필수 속성입니다. 복잡한 실행 조건을 저장하는 방법은 Debug configuration 공식 문서에서 확인할 수 있습니다.

8. F10과 F11, 무엇이 다를까?

function addTax(price) {
  return price * 1.1;
}

const result = addTax(10000);

• F10 Step Over: addTax() 내부는 들어가지 않고 한 번에 실행한 뒤 다음 줄로 이동합니다.
• F11 Step Into: addTax() 함수 내부의 return 줄로 들어갑니다.
• Shift+F11 Step Out: 함수의 남은 코드를 실행하고 호출한 위치로 돌아갑니다.

9. 자주 막히는 부분과 주의점

• 회색 빈 중단점: 디버거가 해당 소스 위치에 중단점을 등록하지 못한 상태입니다. 실행 중 소스가 바뀌었거나 소스 맵·실행 파일이 맞지 않을 수 있습니다.
• 중단점을 지나침: 실제로 실행되는 파일과 편집 중인 파일이 같은지, 해당 코드 경로가 호출되는지 확인하세요.
• F키가 동작하지 않음: 노트북의 미디어 키 설정에 따라 Fn을 함께 사용해야 합니다.
• 조건식의 부작용: 조건부 중단점이나 Debug Console에서 값을 변경하는 식을 실행하면 프로그램 상태가 달라질 수 있습니다. 처음에는 조회용 식만 사용하세요.
• 민감 정보: Debug Console과 변수 창에는 토큰·비밀번호·개인정보가 표시될 수 있으므로 화면 공유와 캡처에 주의하세요.
• 설정 오류: launch.json의 빨간 밑줄에 마우스를 올려 문제를 확인하고, Ctrl+Space 또는 macOS ⌃+Space로 허용 속성을 확인하세요.

10. 20분 연습 과제

• 예제 코드에 F9 중단점을 설정하고 F5로 멈춘다.
• VARIABLES와 마우스 호버로 같은 변수 값을 확인한다.
• F10과 F11을 각각 실행해 함수 진입 차이를 확인한다.
• WATCH에 orders.length와 order?.total을 추가한다.
• order.total >= 100000 조건부 중단점을 만든다.
• Logpoint로 값 세 개를 출력한 뒤 소스 코드가 바뀌지 않았는지 확인한다.
• launch.json에 실행 인수 하나를 추가하고 다시 디버깅한다.

오늘의 핵심 디버깅은 F9로 멈출 곳을 정하고 → F5로 실행하고 → F10/F11로 흐름을 따라가며 → VARIABLES·WATCH·CALL STACK으로 상태를 확인하는 과정입니다. 반복문에서는 조건부 중단점, 실행을 멈추고 싶지 않을 때는 Logpoint를 사용해 보세요.

#VSCode #디버깅 #Breakpoint #개발도구 #코딩초보

공식 자료 및 검증 기준

2026년 7월 21일 기준으로 VS Code 공식 문서만 확인해 작성했습니다.

• Debug code with Visual Studio Code
• Visual Studio Code debug configuration
• Default Keyboard Shortcuts — Debug
• Node.js tutorial — Debugging Hello World