알고리즘 문제를 하나 풀고 있었다.
분명 제대로 작성했다고 생각했는데
값이 제대로 나오지 않았다.
디버깅으로 문제점을 찾아보기로 했다.
1. 중단점 찍기
라인 옆에 빨간 점들이 바로 중단점을 찍은 코드라인이다. 해당 중단점을 컴퓨터가 읽어들이기 전에 컴퓨터의 연산을 일시중지 한다.
컴퓨터는 코드를 빠르게 읽는다.
사람이 읽는 속도보다 상상도 할 수 없을만큼 빠르게 읽는다.
그래서 우리는 어느 코드의 위치에서 특정한 값이 변하고 특정한 주소가 변하는 지 한 번에 알기 어렵다.
그것을 쉽게 해주는 것이 중단점이다.
디버깅 할 때 중단점을 찍은 위치까지는 우리가 작성한 코드를 컴퓨터가 굉장히 빠르게 읽어내며 계산한다.
그러다가 딱! 중단점이 찍힌 부분에서는 컴퓨터의 계산을 '중단'한다.
이 '중단'은 아예 계산을 멈춰버리고 작동을 중지한다는 의미가 아니라
'일시정지'의 의미라고 생각하면 좋다.
내가 분명 이 부분에서 이렇게 값이 들어갈 거라고 생각했는데 왜 제대로 들어가지 않는거지? 하고 살펴보려면... 해당 코드의 시작점에 중단점을 팍! 찍어버리면 그 부분에서부터는 컴퓨터가 코드를 한 줄씩 읽어가며 계산하기 시작한다.
물론 그에 따라 디버깅되는 로그에도 값이나 주소들이 기록된다. (굉장히 편리함)
2. 디버깅 시작하기
두 가지 방법으로 실행할 수 있다.
1. VS코드 좌측에 실행 및 디버그 버튼이 있다. 클릭 후 실행 및 디버그 버튼을 누르면 된다.
2. F5
실행되면 어떤 화살표 단추들이 나온다. 이 단추들에 커서를 올려보면 기능을 알 수 있다.
디버깅이 시작되면 컴퓨터는 첫 중단점 이전까지 연산을 완료하고 중단점을 시작하는 코드라인부터 일시정지 상태가 된다.
'단위 실행'(또는 F10)버튼을 눌러 한 줄씩 코드를 실행해나가며 변수의 값을 확인해 볼 수 있다.
3. 잘못된 점을 찾아 고치기
현재 작성된 위의 코드를 실행하면 undefined가 뜨게 된다.
위의 디버깅을 실행하게 된 원인이다.
어떻게 찾을 수 있을까?
-
결과를 보면 for문의 i가 4가되는 시점부터 undefined가 나오는 것을 알 수 있다.
디버깅하면서 i가 4가 되었을 때 값이 어떻게 변화하는지 지켜보자.
현재 읽어들일 노란 색의 코드라인 이전에 실행된 코드라인(13번째 라인)의 실행으로 인한 연산이 좌측 디버그 로그에 푸른색 반투명 박스로 알려주고 있다.
잘 보면 score[4]의 값이 원래 1이었다가 0으로 바뀐 것을 볼 수 있다. -
이제 14번째 코드라인을 실행하면
scoreboard가 1로 변했다!
scoreboard[j]가 아닌 scoreboard의 값을 바꿔버렸다.
배열을 갖고 있던 scoreboard가 순식간에 1이라는 값으로 변해버렸다.
이에 따라 코드라인 18의 answer.push에 담기는 scoreboard[0]은 존재하지 않는 주소이므로 undefined를 반환하게 되어 answer 배열에 담겨버린 것이다...
디버깅을 종료(Shift + F5 또는 빨간 네모버튼 클릭) 하고 코드를 고치니 해결되었다.
결국 오타로 인해 벌어진 일이었다.
디버깅은 정확하고 정직하다.
한 줄 한 줄을 읽어가면서 내가 쓴 코드의 문제점을 살펴보기에 좋다.
디버깅 관련 단축키 정리
-
F5 : 디버그 시작/정지
-
Shift + F5 : 디버그 종료
- Ctrl + F5 : 시작(디버그 실행 x)
- F9 : 중단점 찍기/지우기(breakpoint on/off)
- F10 : 디버그 현재 라인 실행(한줄씩 실행), 함수를 만나면 함수 안으로 들어가지 않음
- F11 : 디버그 함수의 경우 함수 내부로 들어가서 실행
- Shift + F11 : 디버그 하고 있는 현재 함수 빠져나오기
