🪲 debugging in vsc

console을 찍는 방식을 제일 많이 사용했는데, 최근에서야 IDE 환경에 있는 디버깅 옵션을 사용하고 있다.
정리해보고자 블로그에 남긴다.

기본 도구

Continue / Step Over / Step Into / Step Out / Restart / Stop

Continue

현재 중단점까지 계속 실행한다. 코드 실행이 멈춰 있는 곳에서 다음 중단점까지 코드가 자동으로 실행됨

Step Over

함수 호출이 포함된 코드 라인에서 실행한 후 함수의 내부로 들어가지 않고, 다음 라인으로 이동한다.

start-pop-end로 실행은 되었지만 innerFunction 함수 내부로 들어가진 않는다

Step Into

현재 라인의 코드가 실행되고, 그 코드가 호출하는 함수의 내부로 들어감.

Step Into & Step Over 차이

Step Into는 현재 라인에서 호출되는 함수의 내부로 들어가서 함수 내부 디버깅으로 넘어가는데, Step Over는 현재 라인의 코드가 실행된 후 코드가 호출하는 함수의 내부로 들어가지 않고 다음 라인으로 넘어감.

Step Out

현재 함수 안이라면, 해당 함수는 끝까지 실행하고 반환하고 멈춘다.

함수 안에서 한 줄 씩 디버깅하다가 해당 함수에 에러가 없음을 확신해서 해당 함수 디버깅을 마치고 싶을 때 사용하면 된다.

Step Over와 Step Out의 차이

Step Over는 함수 내부로 진입하지 않고 결과만 반환한다.

Step Out은 Step Into 명령어를 통해 현재 코드라인이 함수 안에 멈춰 있을 경우에 사용한다.

Restart

디버깅 세션이 프로그램의 시작 지점에서부터 다시 실행되며, 중단점 같은 설정은 유지된다.

Stop

현재 디버깅을 완전히 종료하고 싶을 때 사용

Run and Debug

1) 중단점 지정하기

중단점을 찍힌 라인 전까지 코드가 실행된다.

아니면 그냥 중단점을 거는 게 아니라 특정한 조건에 만족할 때만 브레이크 포인트가 동작할 수 있도록 만들 수 있다.

2) WATCH (관찰자)
+아이콘을 눌러서 변수 명을 등록하면 내가 관찰하고 싶은 변수가 코드가 진행됨에 따라 어떻게 변하는지 집중해서 볼 때! 사용하면 굿.

3) Run and Debug 클릭
중단점과 같은 설정 없이 마지막에 console.log만 찍어뒀다면 console.log로 나오는 값이 그대로 출력 되는 것을 볼 수 있다.