VS Code의 디버그 모드 활용 | 논리 오류 찾기

디버그 모드에서 앱이 실행되는 과정을 한줄 한줄 뜯어볼 수 있다.

변수에 어떤 값이 입력되고 어디로 이동하고 있는지 확인할 수 있어

의도한 대로 코드가 작동하고 있는지 확인하기 좋다.

 

1. 디버그 모드 진입

• 윈도우 f5 버튼
• 또는 왼쪽 메뉴바에서 진입하여 Run and Debug 클릭

왼쪽 세로 메뉴바에서 벌레와 삼각형이 함꼐 있는 버튼이 바로 디버그 메뉴이다

 

두가지 방법 중 하나로 디버거 선택 창에 진입한다.

우리는 현재 노드 환경에서 코딩 중이므로

Node.js 디버거를 선택한다.

화면 하단에 디버그 콘솔창이 뜬다.

 

2. 중단점Breakpoint 설정

앱을 실행하면

중단점이 설정된 곳에서 코드 실행이 멈춘다.

그 지점에서 필요한 정보를 확인하면 된다.

논리 오류가 발생하는 것으로 추측되는 지점에 주로 설정한다.

중단점을 설정하고자 하는 행의 왼쪽에 마우스 커서를 가져가면 빨간 점이 표시된다.

클릭하면 중단점이 설정된다.

 

3. 실행

이제 서버를 실행하고 접속해본다.

앞에서 만들었던 서버가 뜬다.

데이터를 입력하고 보내기 버튼을 누르면

 

중단점을 설정한 지점에서 코드 실행이 멈추고

왼쪽에 각종 정보들이 뜬다.

• 변수 : 로컬, 블록, 핸들러, 광역 등. 여기서 테스트를 위해 코드 변경 없이 직접 변수값을 변경할 수도 있다.
• WATCH : 코드가 실행됨에 따라 어떻게 값이 변하는지 계속 확인이 필요한 변수를 이곳에 등록해둘 수 있다.
• 콜 스택에 현재 등록된 작업

콘솔창에 필요한 정보를 직접 입력해서 확인해볼 수도 있다.

실행되고 있는 코드에 영향을 끼치지 않고, 필요한 테스트를 수행할 수도 있다.

디버그 모드 버튼별 기능

• 두번째 버튼 : 다음 코드 라인으로 넘어감
• 세번째 버튼 : 다음 함수로 넘어감
• 네번째 버튼 : 함수를 빠져나감