현재 노트: KR-010.00 a VSCode 브레이크 포인트를 활용한 디버깅
상위 분류: KR-010.00

#Debugging

JavaScript에서 console.log보다 좀 더 멋들어지게 디버깅 하는법
브레이크 포인트를 활용하여 우리는 디버깅을 좀더 편하고 수월하게 할 수 있습니다.
매번 console.log로 찍거나 중간에 if문등을 넣지 않아도 됩니다1

해당 기능을 이해하기 위해선 스텝-오버, 스텝 인투, 스텝아웃, next or continue등의 용어에 대한 이해가 필요하지만 해당 용어들에 대한 정보는 구글에서 더 정확한 의미와 사용 방법, 한계 등이 나오기에 본 페이지에서는 어떤 문제에 쓰였을 때 효과적으로 해결하는지 시나리오 위주로 설명하겠습니다.

IDE 는 Visual Studio Code 기준

(IDE에 따라 단축키, 용어 위치등이 다를 수 있지만 아마 의미상으로는 대부분 비슷할 것입니다.)

Continue : Step-over : Step-into : Step-out -Restart : Stop

Continue 다음 브레이크포인트로 이동
Step-over 함수 뛰어넘기
Step-into 함수 내부에서 한줄씩 실행
Step-out 함수내부에서 현재줄부터 아래까지 한번에 실행

함수안에서 동작하는 변수가 변화하는 값을 보고 싶을때

특정 for 문이 동작하는 상황에서 예를들어 변수값이 변화하는 지를 보고 싶을 때 이때 step-into를 사용하여 한줄씩 확인할 수 있다.

1. 먼저 F5디버그 시작을 누른다
2. 이후 멈추고싶은 함수의 변수를 드래그한 우클릭한 후 로컬변수를 Add to Watch를 클릭하여 등록해줍니다.
3. 이후 step-into를 클릭할때마다 우리가 보고싶은 변수의 변화확인 가능

예시는 단순한 변수하나에 숫자타입이지만 변수가 여러개이거나 복잡한 데이터 타입도 쉽게 확인가능

function exampleFunction() {
    for (let i = 0; i < 5; i++) {
        let variable = i * 2;
        
    }
}

함수A이후 함수B의 값은 넘기고 , 함수C전까지의 상태를 보고 싶을 때

이때는 스텝오버를 활용할 수 있다. 여러 함수가 있을때 함수내부의 세세함보다는 중간에 뛰어넘고 싶을 때 사용중 말그대로 (over)할때 사용

다음은 display전 함수중간인 middle의 결과값을 건너뛰는 데에 step-over사용

1. 동일하게 브레이크포인트 설정후 F5디버그시작
2. 체크하고싶은 함수전까지 step-over를 통해 뛰어넘기
3. 확인하기 전 함수까지 체크

function exampleFunction(arr) {
    for (let i = 0; i < 5; i++) {
        arr[i] =  i;
    }
}

function middle(arr) {
    for (let i = 0; i < 5; i++) {
        arr[i] = i*2;
        
    }
}



function display (arr){

    for (let i = 0; i<5 ;i++){

        console.log (arr)
    }
}


let test = new Array(5);

exampleFunction(test)
middle(test)
display(test)

결론

좀더 잘쓰면 복잡한 속성, 내용, 변수등에 적절히 사용하면 console.log를 안써도 되고 또 표기에서 보이는 것보다 정확한 데이터 그리고 데이터의 변화과정가 에러가 뜨는경우도 제대로 확인가능한다.