오늘은 이클립스에서 디버깅하는 방법에 대해서 공부하겠습니다. Debugging 디버깅 또는 디버깅에 간 blog.naver.com 이전에 이클립스에서 디버깅하는 방법에 대해 공부해 보았다.자바는 이클립스에서 디버깅하면 되지만 자바스크립트 개발자 도구를 통해 디버깅을 해야 한다.
이번에는 이클립스 디버깅에서 수행한 예제를 이용해 크롬 개발자 도구를 이용해 디버깅을 공부해보자(디버깅이 안 되거나 디버깅이 무엇인지 모르는 경우에는 상기 이클리스로 디버깅하는 방법으로 보는 것이 좋다).
이렇게 input에 숫자를 입력하고 버튼을 누르면 해당 숫자가 짝수인지 홀수인지를 알려주고 해당 숫자가 짝수라면 1부터 해당 숫자까지 짝수 개수를 알려주고 해당 숫자가 홀수라면 1부터 해당 숫자까지 홀수 개수를 알려주는 기능이 있다.
이를 디버깅하기 위해서는 크롬으로 실행해 해당 js 소스를 확인해준다.
원하는 위치에 더블 클릭하면 브레이크 포인트를 얻을 수 있다.
브레이크 포인트를 잡고 실행하면 왼쪽 진행 버튼과 넘기는 버튼이 보이게 된다.단축키(F8) 또는 왼쪽 버튼(파란색 부분)을 누르면 다음 브레이크 포인트로 이동하게 되며 단축키(F10) 또는 오른쪽 버튼(빨강 부분)을 누르면 한 줄씩 이동하게 된다.
또 오른쪽 보라색 부분을 보면 브레이크 포인트와 값을 쉽게 확인할 수 있다.
이렇게 한 줄씩 이동하면서 바로 값을 확인할 수 있는데, 한 줄씩 넘기면 반복문을 만났을 때 하나씩 반복하면서 진행한다. 만약 i=5 때 홀수를 타는지 짝수를 타는지 확인하고 싶다면 한 줄씩 계속 반복하면서 반복문을 다섯 번 반복할 필요 없이 조건을 부여하면 된다.
원하는 위치에 이렇게 조건을 부여하면
조건을 부여한 부분에 오렌지색 브레이크 포인트를 얻을 수 있게 된다.i=5 때 짝수를 타는지 홀수를 타는지 보기 위해 짝수 부분이 홀수 부분인 두 곳에 조건을 붙여 실행해 봤다.
F8을 눌러 브레이크 포인트로 바로 이동해보면 26번선은 타지 않고 바로 29번선으로 이동하는 것을 확인할 수 있다.이렇게 i=5일 때 else 부분을 타는 것을 바로 확인할 수 있다.
전체적으로 보면 변수마다 값도 바로 볼 수 있고 오른쪽부터 브레이크 포인트와 값을 한꺼번에 확인할 수도 있다.이렇게 크롬 개발자 도구를 이용하여 자바스크립트를 디버깅하는 방법에 대해 공부해 보았다.디버깅만 잘해도 개발의 절반은 먹고사는 것이므로 디버깅을 잘 사용하고 습관화하는 것을 노력해 보자.
매일 새로운 시작
