자바스크립트 크롬으로 디버깅 하는 방법

자바스크립트 크롬 브라우저로 디버깅 하는 방법

 

환경:  Chrome

 

자바스크립트 작성시 디버깅은 필수 입니다. 일반 어플리케이션 프로그램처럼 크롬에서 자바스크립트 디버깅이 가능합니다. 복잡한 프로그램을 좀더 빠르게 확실하게 작성하기 위해서는 필수겠죠. 크롬 뿐만 아니라 익스플로러도 개발자 도구를 통해 디버깅을 할 수 있습니다.

 

 ▼ 크롬에서 개발자 도구를 실행하기 위해서 [도구 더보기] 메뉴로 선택하거나 단축키 F12 를 누르시면 크롬 화면 하단에 창이 나타납니다. 이것을 개발자 도구라고 하는데 처음 보게 되면 아주 복잡해 보입니다.

 

 

▼ 개발자 도구에서 디버깅은 Sources 탭 화면에서 이루어 집니다. 다른 탭들은 무시해도 됩니다. 소스 탭에는 현재 웹 페이지를 구현한 모든 소스가 있습니다. 그리고 소스 화면 왼쪽에는 라인 번호가 있죠.

 

▼ 디버깅을 위해 브레이크포인트를 찍어야 하는데 라인 번호가 있는 부분에 오른 마우스를 누르시면 Add breakpoint 를 볼 수 있습니다. 클릭하시면 라인에 파란색 박스 표시가 됩니다.

 

▼ 파란색 표시가 된 부분은 소스를 디버깅하게 되면 멈추게 되는 위치입니다. F5 를 누르게 되면 소스가 진행되다가 해당 위치에서 멈추고 브라우저 상단에 컨트롤이 생깁니다. 상단에 있는 컨트롤을 이용해서 단계별로 소스를 진행하시면 됩니다.

 

▼ 상단에 있는 Paused in debugger 컨트롤에 두 개의 버튼이 있습니다. 1번은 단계를 한 칸씩 진행할 수 있는 버튼입니다. 2번은 다 지나치고 다음 브레이크 포인트로 이동합니다. 한 단계씩이 아닌 바로 다음 단계로 빠르게 이동하기 위해서 사용합니다.

 

▼ 디버깅에서 브레이크포인트를 거는 이유는 그 시점에서 변수들에 어떤 값이 들어가 있는지 확인하기 위해서 입니다. 다른 프로그램들과 마찬가지로 변수에 마우스를 가져가면 현재 시점에서의 값을 볼 수 있습니다.

 

▼ 마우스로 매번 확인하기 귀찮다면 변수를 화면에 등록해 놓고 볼 수도 있습니다. 변수를 선택하고 오른 마우스를 누르시면 [Add to watch] 메뉴를 볼 수 있습니다.

 

▼ [Add to watch] 를 클릭하시면 오른쪽 Watch 란에 변수가 들어갑니다. 그럼 매번 마우스를 가져가서 확인하지 않아도 디버깅 과정에서 실시간으로 확인이 가능한 것이죠.

출처 : http://mainia.tistory.com/2801