Debug code with Visual Studio Code
위의 공식 문서를 읽어보며 필요한 부분을 번역해서 정리한 글입니다.
VS Code는 JavaScript, TypeScript, 그리고 Node.js 디버깅을 별도의 설치 없이 기본적으로 지원한다.
- 추가적인 플러그인이나 확장 없이 내장 지원
- 다른 언어를 디버깅하려면 보통 '디버거 확장'이나 '외부 프로그램'을 따로 설치해야 함
📝 Debugger user interface
-
실행 및 디버그 보기(Run and Debug view): 실행, 디버깅, 디버그 설정 관리를 위한 모든 정보를 표시함.
-
디버그 툴바(Debug toolbar): 자주 쓰는 디버깅 동작을 위한 버튼들을 제공함.
-
디버그 콘솔(Debug console): 디버거에서 실행 중인 코드의 출력 내용을 보고 상호작용할 수 있게 해줌.
-
디버그 사이드바(Debug sidebar): 디버깅 세션 중 호출 스택(call stack), 중단점(breakpoints), 변수(variables), 감시 표현식(watch variables) 등을 조작할 수 있게 해줌.
-
실행 메뉴(Run menu): 자주 사용하는 실행 및 디버그 명령어들을 제공함.
📝 Before you start debugging
- 언어와 런타임에 맞는 디버깅 익스텐션을 마켓플레이스에서 설치 (JavaScript, TypeScript, Node.js는 내장)
- 디버깅 구성(debugging configuration) 정의
간단한 애플리케이션의 경우, VS Code는 현재 활성 파일을 실행하고 디버깅하려고 시도함.
하지만 더 복잡한 애플리케이션이나 디버깅 시나리오에서는launch.json파일을 생성하여 디버거 설정을 명시해야 함.
(💡 팁: VS Code의 Copilot을 사용하면 launch.json 파일 생성을 도와줌.debug configuration) - 코드에 breakpoints 잡기
📝 Start a debugging session
- Variables: 현재 디버깅 범위(scope)에 있는 변수들을 표시하며, 각 변수의 타입과 값도 함께 보여줌
- Watch: 디버깅 세션 동안 관심 있는 특정 표현식이나 변수의 값을 지속적으로 추적할 수 있게 해줌
- Call stack: 현재 실행 시점에서의 함수 호출 계층 구조를 보여주며, 프로그램이 현재 지점에 도달하기까지 거친 경로를 나타냄
- Loaded Scripts: 현재 디버깅 세션에 로드된 모든 스크립트를 나열하여, 코드의 다른 부분이나 사용 중인 라이브러리로 이동할 때 유용
※ 단순히 F5 눌러서 현재 파일을 실행하는 게 아니라, 더 복잡한 상황(ex. 이미 실행 중인 다른 앱에 연결, 원격 서버 디버깅, Docker, 백그라운드 서버 프로세스 등)을 디버깅하는 경우에는 디버거 설정을 명시한 launch.json 파일을 직접 생성해야 함.
※ Node.js의 경우, VS Code는 package.json 파일에 있는 start 스크립트를 확인하여 애플리케이션의 진입점(entry point)을 결정함.
(start 스크립트란 package.json 안에 있는 "scripts" 항목 중 "start"로 정의된 명령어)
📝 Debug actions
| 동작 | 설명 |
|---|---|
| Continue / Pause (F5) | 계속(Continue): 다음 중단점까지 프로그램/스크립트를 정상적으로 실행함. 일시정지(Pause): 현재 줄에서 코드 실행을 멈추고 한 줄씩 디버깅할 수 있도록 함. |
| Step Over (F10) | 다음 메서드를 한 줄로 실행하되, 내부 로직은 따라가지 않음 (즉, 해당 메서드 안으로 들어가지 않음). |
| Step Into (F11) | 다음 메서드 안으로 들어가서 그 내부를 한 줄씩 따라가며 실행함. |
| Step Out (Shift + F11) | 현재 메서드 내부에 있을 때, 남은 코드를 한 번에 실행하고 호출한 이전 위치(상위 함수)로 돌아감. |
| Restart (Shift + Cmd + F5) | 현재 실행 중인 프로그램을 종료하고, 현재 디버깅 설정(run configuration)으로 다시 디버깅을 시작함. |
| Stop (Shift + F5) | 현재 실행 중인 프로그램을 종료함. |
