chrome debugging mode

디버깅(debugging)이란
스크립트 내 에러를 검출해 제거하는 과정이다.



chrome에서 제공하는 디버깅 툴을 사용하면 다양한 기능을 활용할 수 있고,
실행 단계마다 일어나는 코드 단위를 추적할 수 있다.


크롬에서 디버깅하기
chrome 화면에서 f12 를 누르면 개발자 툴이 나온다.
그 곳에서 Sources(소스) 탭을 누르면 아래와 같은 화면을 볼 수 있다.

Source탭
맨 왼쪽 부분의 파일들은 현재 읽히고 있는 모든 파일 -(마우스 오버하면 현재 열린 파일의 경우 표시가 되어 알기 쉽다.)
가운데 부분은 소스코드이다.
맨 오른쪽 부분은 디버깅 제어 기능들이다.


디버깅 한단계씩 돌리는 단축키 : F10 (window)
디버깅 종료 단축키 : F8 (window)


디버깅 제어 기능을 살펴보자

중단점(breakpoint)
자바스크립트의 실행이 중단되는 코드 내 지점

원하는 지점에 중단점을 지정해두면 해당 부분의 코드가 실행될 때 중지되고,
실행이 중지된 시점에 변수가 어떤 값을 담고있는지를 알 수 있다.

위의 캡쳐처럼 디버깅 모드에서는 중단점 목록을 확인할 수 있다.

중단점을 설정해놓은 항목을 클릭해 해당하는 곳으로 이동할 수 있다.
체크박스를 해제하면 해당 중단점이 비활성화 된다.

마우스 오른쪽 버튼을 클릭했을 때 많은 메뉴가 나온다.



맨 위에 버튼 정렬된 곳을 살펴보자.

1. 스크립트 실행 일시중지 [ F8 ] 또는 [ ctrl+\ ]
2. 다음 함수 호출(Step Over) [ F10 ]
3. 다음 함수 호출(Step Into) [ F11 ] - 함수 안 쪽으로 이동
4. 현재 함수에서 벗어나기 [ Shift + F11 ]
5. 중단점 비활성화
6.예외에서 일시중지됨