현재 노트: KR-010.00 a
상위 분류: KR-010.00 Debugging

#Debugging

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

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

IDE 는 Visual Studio Code 기준

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

위의 이미지의 아이콘의 의미는 다음과 같습니다.
Continue : Step-over : Step-into : Step-out : Restart : Stop

이 중에서 아래의 4가지 기능을 살펴볼 것입니다.
Continue 다음 브레이크포인트로 이동
Step-over 함수 뛰어넘기
Step-into 함수 내부에서 한줄씩 실행
Step-out 함수내부에서 현재줄부터 아래까지 한번에 실행

다음 브레이크 포인트로 넘어갈 때

Breakpoint설정을 통해 어디에서 멈출지를 설정할 수 있습니다. 그리고 이는 여러개 설정이 가능하기에 한 브레이크포인트를 전부 뛰어넘은 이후 특정 브레이크에서 멈추고 싶을 때 Continue를 사용합니다.

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

이때는 스텝오버를 활용할 수 있다. 여러 함수가 있을때 함수내부의 세세함보다는 중간에 뛰어넘고 싶을 때 사용중 말그대로 함수 단위로 step-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)

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

특정 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;
        
    }
}

특정 함수에서 중간에서 마지막까지 확인 하고 싶을때

예를들어 함수의 중간까지 확인후 끝에는 어떻게 될까를 확인하고 싶을 때가 있습니다. 이때 step-out을 활용합니다.

예를 들어 함수1안에

1. 동작1
2. 동작2
3. 동작3
4. 동작4
5. 동작5

와 같은 구조의 예시입니다.
이 때 우리는 브레이크포인트를 2까지 설정하여 동작1과 동작2의 결과를 모두 확인하였습니다. 그 상황에서 동작3,4,5가 시간이 걸린다거나 하는 경우 최종 결과값만 보고 싶다면 이 때 step-out을 통해 마지막 결과를 확인합니다.

결론

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