[VSCode] Visual Studio Code interactive 디버깅 방법

1. 확인하고 싶은 라인에 코드 중단점을 찍는다

43번째 줄에서 중단, 다음 실행시 45번째 줄 실행

• 여러 개 찍어도 되며, 디버깅 중간에 찍어도 상관없다.
• for문에 찍을 경우 반복문이 끝날 때까지 중단되므로, 식을 세워 내가 원하는 값일 때만 중단하게끔 설정할 수 있다.

i가 3일 때만 중단

 

 

2. 디버깅 시작 or F5 클릭, 환경은 사용중인 언어(Node.js)로 선택

이와 같이 디버깅이 시작됨

 

 

3. 변수 및 중단점 진행 과정 확인

다음과 같이 중단점에서 코드가 대기 상태로 들어감

스코프 별로 변수 확인 가능

• 조사식: 식을 추가하여 값을 알고싶은 데이터를 확인할 수 있음
• 변수명에 식을 추가한 값도 확인이 가능 (monsterHp + 100)

• 호출 스택: 호출이 진행된 경로가 스택 형식으로 확인할 수 있음
• 로드된 스크립트: 코드가 실행되면서 로드된 스크립트 파일을 확인할 수 있음
• 중단점: 모든 중단점을 확인할 수 있으며 활성/비활성, 추가/삭제를 할 수 있음

 

 

4. 디버깅 툴을 활용하여 디버깅을 진행

 

1. 계속(F5): 다음 중단점까지 코드 실행
2. 단위 실행(F10): 중단점이 아닌 코드를 기준으로 한 줄씩 실행 (타 파일이나 함수로 들어갈 수 없음)
3. 단계 정보(F11): 현재 line에 일반 함수나 외부 함수가 있다면 함수로 진입 or 다음 줄 실행
4. 단계 출력(Shift+F11): 현재 line이 함수나 외부 함수라면 함수를 호출한 곳으로 빠져나옴 or 다음 줄 실행
5. 재시작(Ctrl+Shift+F5): 디버거 재시작
6. 연결 끊기(Shift+F5): 디버거 중지