😱 문제 상황
중단점만 사용하고 있던 디버그 모드에 대해서 배운 후 테스트를 진행하려는데 내 마음대로 안 돌아가는 듯한 느낌!
어디가 마음대로 되지 않았냐 하면 실행 시켜도 variables, watct(조사식) 변화 없음
🫶 해결
two 변수를 const로 선언해놓고 재할당하려했기에 생긴 문제
에러가 나는 변수 앞에 중단점을 찍고 실행하면 제대로 실행이 된다
왼쪽 변수, 조사식, 콜 스택 창에만 집중하고 DEBUG CONSOLE을 전혀 보지 않은 것이 문제의 원인
➕ 추가 정보
디버그 모드 사용 방법
1. variables
local, global 등 변수에 정해진 값을 세밀하게 알 수 있음
2. watch
관찰하려는 변수 이름을 입력해서 볼 수 있는 기능
변수만 가능할 뿐 아니라 문장도 사용할 수 있음(ex. two === 2라고 입력하면 :true 라고 알려줌)
3. call stack
콜스택을 확인 가능
4. loaded scripts
로딩된 모든 스크립트 확인 가능
5. breakpoints
break!
point를 걸어놓으면 거기까지만 코드가 실행됨
여러 개 걸고 체크박스 해제하며 테스트 가능
6. 실행 메뉴
- 맨 왼쪽 : 다음 중단점까지 실행
- 점 위에 화살표 있는 세 개: 단위 실행 / 단계 정보 / 단계 출력
- 단위 실행 step over: 중단점과 관계 없이 한 단위씩 차례로 실행, 다른 함수 호출하면 건너뛰기됨
- 단계 정보 step into: 중단점과 관계 없이 한 단위씩 차례로 실행, 다른 함수 호출하면 들어가서 디버깅
- 단계 출력 step out: 디버깅 중인 함수를 끝내고 바로 밖으로 나옴
- 새로고침: 말 그대로 새로고침, 코드 바꿨을 때 새로고침하는 것
- 네모: 디버그 모드 중단
참고자료
microsoft - Visual Studio 디버거를 사용하여 코드 탐색
microsoft - 절대 초보자를 위한 디버그
한 20분 구글링했는데도 마땅한 해결방법이 없어 당황했는데
아싸 이제 console.log 복붙하면서 안 찍어봐도 된다!
+)
- Jan 25, 2024
당시에는 해결이 됐는데 또 문제가 발생했다.
타입에 대한 확인을 했음에도 계속 오류가 발생함
Java script debug terminal로 실행하면 오류가 나는데 열심히 찾아봐도 아직 이유를 모르겠다ㅠㅠ
일단 방법을 디버깅할 때 node.js - run current file로 선택하면 문제없이 디버깅 된다 !
이유를 알게 되면 추가할 것
-> 정확한 이유라기보다 해결방법을 찾음. 중단점에 대한 이해가 부족했다. 이 글을 쓸 때만 해도 '중단점'이 앞의 코드를 실행해서 멈추고 그 앞까지의 결과를 보는 것이라고 생각했는데
디버그의 의미는 거기까지는 문제없이 실행, 그리고 그 다음에 하나하나 넘겨가며 내 의도와 다른 변수, 인수 등을 체크하는 것이다. 이 사실을 알고 난 이후부터는 디버그가 내 의도와 다르게 동작한다고 느낀 적은 없다. 의문점 해결~!
노트북이 좋아