[JavaScript] JavaScript Debugging
JavaScript Debugging
자바스크립트는 실행단계(런타임)에서 버그가 발견된다.
크롬 개발자도구 - Sources 탭에는 다음과 같은 디버깅 컨트롤 버튼이 있다.(1)
디버깅 컨트롤 버튼 아래 부분에는 해당 라인에 대한 자세한 정보들이 보여진다.
Break Point를 건 후 디버깅은 물론, Console에서 해당 변수에 대한 정보를 얻을 수도 있다.(2)
- Pause / Continue script execution
첫 번째 버튼은 평소에는 Pause 상태인데, Break Point가 잡힌 상태이면 Continue 버튼이 된다.
다른 Break Point가 잡힐 때까지 코드를 진행한다.
- Step over next function call
코드 라인을 한 스텝 진행하는데, 현재 실행 라인에 함수 실행 코드가 있다면 함수는 실행한다.
이 때 함수 안의 코드로는 진입하지 않는다. 즉, 라인의 함수를 실행만 하게 된다.
- Step into next function call
스텝 오버와는 다르게 현재 실행 라인에 함수가 있다면,
함수 안의 첫 번째 코드로 진입해 들어가 다시 하나씩 라인별로 코드를 실행할 수 있다.
- Step out of current function
스텝 인투를 통해 들어온 함수를 끝까지 실행하고 밖으로 빠져나와 해당 함수를 실행한 함수로 돌아간다.
- Active / Deactive breakpoint
Break Point를 끄거나 켤 수 있다.
- Pause on exception
자바스크립트 예외가 발생하면 해당 위치에 Break Point를 잡아준다.
참고자료