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

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

 

 

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

 

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

 

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

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 크롬에서 자바스크립트(Javascript) 코딩하기 ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하기 ▶ 구글 크롬(Chrome) 개발자 도구 이용해서 Javascript 메모리 관리하기

 

 

 

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

 

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

 

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

 

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

 

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

※ 아래는 참고하면 좋을 만한 글들의 링크를 모아둔 것입니다. ※ ▶ 구글 크롬 개발자 도구 이용해서 자바스크립트 코드 실행하는 방법 ▶ 크롬에서 자바스크립트(Javascript) 코딩하기 ▶ 크롬 Chrome 브라우저 자바스크립트 실행 안될 때 활성화 하기 ▶ 구글 크롬(Chrome) 개발자 도구 이용해서 Javascript 메모리 관리하기