프론트엔드

디버거 활용법

테오구 2022. 6. 10. 15:25
728x90

 

전체적인 변수의 값을 확인할 수 있습니다.

값을 임의적으로 변경할 수 있습니다.

 

 

 

 

 

 

 

 

 

전체적인 것을 확인하지 않고 관심있는 것을 확인하는데 사용됩니다.

변수에 대해서 알 수 있을 뿐만 아니라 result === 3인지 아닌지에 대해서도 알 수 있습니다.

 

 

 

 

 

 

 

 

함수가 어떤 순서대로 진행이 되었는지 알 수 있습니다.

 

 

 

 

 

 

 

로딩된 모든 스크립트를 확인할 수  있습니다.

 

 

 

 

 

우리가 걸어둔 브레이크 포인트를 볼 수 있습니다. 부분적으로 브레이크 포인트를 해제하려면 체크를 해제해주면 됩니다.

 

왼쪽부터

계속(F5): 바로 그 다음 브레이크 포인트로 실행

단위 실행(F10) : 코드를 한 줄 한 줄씩 실행합니다. 단 함수를 호출하는 경우 그 함수는 한번에 호출합니다.

단계 정보(F11) : 단위 실행과 비슷하지만 내부에 함수가 호출되면 함수가 선언된 곳으로 가 한줄한줄 실행합니다.

단계 출력(<shift> + F11) : 실행 함수를 빠져나옵니다.

다시 시작(Ctrl + <shift> + F5) : 

중지

특정한 조건을 주었을때 브레이크 포인트를 걸 수 있습니다.

728x90