자바스크립트 디버깅

자바스크립트는 자바처럼 문법적인 오류가 발생하거나 실행 중에 오류가 발생한다고 하더라도 오류를 바로 보여주지 않습니다. 대신 웹 브라우저마다 디버깅을 할 수 있는 툴을 제공해주고 있습니다. 사용방법 또한 거의 비슷합니다. “Internet Explorer”도 지원하고 있지만 “Chrome”이 훨씬 직관적이므로 크롬을 통해 살펴보도록 하겠습니다. 우선 디버깅 방법을 살펴보기 위해 다음과 같이 오류를 발생시킬 수 있는 코드를 작성합니다.(“debug.html”)

 

 

자바와 같은 언어는 실행도 안되지만 자바스크립트는 오류가 발생하기보다는 결과가 안 나타나며 반응이 없습니다.

 

 

개발자 도구로 지원이 되므로 크롬 메뉴에서 [도구 더 보기]-[개발자 도구]를 선택합니다.

 

디버깅을 확인할 수 있는 다음과 같은 화면이 나타납니다.

 

 

[Sources] 탭을 선택하고 왼쪽 파일명을 두 번 클릭하여 소스 파일을 오픈합니다.

 

 

브라우저의 주소 표시줄을 클릭하고 다시 한번 [Enter] 키를 누르면 다음과 같이 에러가 난 부분에 빨간색 x표시가 나타나며 디버깅이 가능해집니다.

 

Breakpoints

에러를 모두 수정합니다. 또한 브라우저의 모둔 디버그 창에서는 중단점을 설정하고 한 라인씩 실행시켜가며 변수에 저장된 값을 파악할 수 있도록 지원됩니다.

소스가 나타나는 화면에서 중단점을 설정하고 싶은 부분의 라인 넘버를 클릭하면 다음과 같이 중단점이 설정됩니다.

 

크롬의 주소 표시줄에서 다시 한번 [Enter] 키를 눌러 실행하면 중단점을 설정한 부분까지 실행이 되고 중단점을 설정한 부분에서 실행이 일시 정지됩니다.

“Paused in debugger”의 Step over next function call 버튼을 누르면 한 라인씩 실행되는 것을 확인할 수 있습니다.

 

 

또한 변수 위에 마우스 포인터를 올려놓으면 현재 변수에 저장된 값이 어떤 값인지 출력되므로 문법적 디버깅 이외에 실행 오류를 처리 때도 유용하게 사용됩니다.

 

인터넷 익스플로러에서도 마찬가지로 동일한 기능을 제공합니다. 실행된 화면에서 [F12] 키를 누르면 다음과 같은 개발자 도구 화면이 나타나고 크롬에서와 동일한 방법을 이용하여 작업하면 됩니다.