이번 7-4장에서는 Venkman 모질라 자바스크립트 디버거에 대해서 알아보자.
현재 Venkman 설치를 위한 Firefox Add-ons Venkman 웹 싸이트는 파이어폭스 1.0 까지만 지원하는 Venkman 이 올라와 있는 등 업데이트가 상당히 늦어지고 있다. 따라서 가장 최신 버젼의 Venkman 을 가장 최신버젼의 파이어폭스에 설치하기 위해서는 getahead venkman 웹싸이트에 접속해서 설치를 하자. venkman development 라는 Venkman 개발 싸이트도 있으나 getahead 싸이트에서 가장 최신버젼의 Venkman 을 설치할 수 있다.
<Venkman v0.9.86 이 설치가 된 그림>
Venkman 이 설치되었다면 파이어폭스 메인 메뉴의 도구 -> JavaScript Debugger 를 클릭하면 아래 그림과 같이 Venkman 윈도우가 뜰 것이다.
Venkman 은 8개의 창으로 구성되어 있다. 각 창은 마우스 드래그 앤 드롭으로 메인 창내에서 위치이동이 가능하다. 또한 각각의 창은 아래 그림과 같이 왼쪽 상단의 덕킹 버튼을 통해서 메인 창에서 이탈시키거나 다시 원위치로 복귀가 가능하다.
개발자 특성에 따라 불필요한 창은 오른쪽 상단의 close 버튼으로 닫을 수 있다. 다시 열기 위해서는 View ->Show/Hide 에서 선택하면 된다. 또한 초기의 레이아웃으로 복구하려면 Command-line interface 에 /restore-layout factory 명령어를 입력하고 엔터키를 치면 원래대로 적용된다.
1. Loaded Scripts
Loaded Scripts 창은 현재 웹페이지에 <script> 로 정의된 모든 자바스크립트 코드 혹은 <script type="text/javascript" src="classicalInheritance.js"></script> 처럼 외부의 자바스크립트 파일을 인지하여 아래와 같이 보여준다. Loaded Scripts 에 스크립트가 잘 로드되지 않을 경우엔 파이어폭스를 모두 닫은 후 새로 열고 다시 url 을 실행시킨다. 그 후에 JavaScript Debugger 를 실행시키면 Loaded Scripts 창에 스크립트가 로드될 것이다.
위 그림처럼 Loaded Scripts 창의 + 싸인(html 혹은 .js 파일)을 클릭하면 해당 요소들의 메소드 리스트가 코드 라인과 함께 표시될 것이다. 각각의 요소를 더블클릭하면 해당 소스코드를 아래 그림처럼 Source Code 창에서 확인 할 수 있다.
2. Breakpoint
Venkman 소스코드창에는 디버깅을 위한 브레이크 포인트를 설정할 수 있다. 브레이크 포인트는 Venkman 으로 하여금 실행을 멈추고 그 상태의 변수값 혹은 속성값을 확인하여 에러를 디버깅하기 위한 기능이다. Venkman 은 hard 및 future 두 종류의 breakpoint 를 지원하고 있다. hard 의 경우 breakpoint 로 지정할 수 있는 곳은 메소드 안으로 한정되어 있다. 반면 future 는 breakpoint 로 지정할 수 있는 곳이 메소드 외부이다. 메소드 외부라면 웹 페이지가 로드되자마자 자바스크립트가 실행되는 영역을 의미한다. 메소드 안이라면 이벤트가 발생되어 호출되기 전까지는 실행되지 않는 영역을 의미한다.
예를 들어보자. AJAX 강의 4-9장 - 자동완성 기능 구현하기의 autoComplete.html 파일을 실행해보자. 소스코드창에 아래 그림과 같이 hard breakpoint 를 30 라인에 설정하자. breakpoint 를 설정하는 방법은 소스코드창 라인넘버 바로 왼쪽 여백을 마우스로 클릭하면 된다. hard breakpoint 는 빨간색 B 로 표시된다. 또한 future breakpoint 를 23 라인에 설정해 보자. future breakpoint 는 오랜지색의 F 로 표시된다.
autoComplete.html 의 Names 입력창에 a 를 입력하자. 그러면 실행이 중단되고 Venkman 소스 코드창은 아래와 같이 30 라인에 걸쳐 노란색 라인이 생겼을 것이다.
이번에는 future breakpoint 가 작동하도록 해보자. future breakpoint 는 메소드 밖에 존재하므로 해당 웹 페이지가 로드될때 실행된다. hard breakpoint 로 인해서 30 라인에서 멈춰진 프로세스는 Venkman 메인메뉴 밑에 있는 Continue 버튼을 눌러서 다시 실행시킨다. autoComplete.html 파일을 리로드하자. 아래 그림과 같이 23 라인에 걸쳐 노란색 라인이 생기고 오랜지색의 F 가 빨간색의 B 로 바뀔 것이다.
또한 Venkman 의 Breakpoints 창을 통해서 여러 파일에 걸쳐 설정된 breakpoints 를 아래 그림과 같이 확인 할 수 있다.
브레이크 포인트를 걸 수 있다는 것은 디버깅을 위한 준비가 되었다는 것을 의미한다. 브레이크 포이트를 걸고 현 시점의 변수의 값이 맞는지 확인 하거나 수정할 수 있다. 브레이크 포인트를 걸면 아래와 같은 4가지 기능을 사용할 수 있다.
Continue는 break point 에서 멈춘 프로세스를 다시 시작하는 기능을 제공한다. 에러가 발생할 것이라 예상되는 곳에 브레이크 포인트를 여러개 설정한 후 Continue 를 눌러가며 디버깅을 하면 에러를 쉽게 발견할 수 있을 것이다.
Step Over 는 디버깅중 다른 메소드를 호출하는 부분을 그냥 넘어가는 기능이다. 디버깅을 할때는 소스 코드를 한줄 한줄 확인하게 되는데, 이미 어떤 메소드는 충분히 디버깅 했을 경우나 혹은 에러가 없다는 확신이 있을때는 굳이 그 메소드를 다시 검사할 필요는 없을 것이다. 하지만 Step Over 를 클릭했다고 해서 해당 메소드의 내부 로직을 건너 뛰는 것은 아니며 전부 실행된다.
Step Into 는 Step Over 의 반대개념이다. 디버깅중 메소드 호출부분이 나올때 Step Into 를 클릭하면 해당 메소드 내부로 들어가고 계속 디버깅 할 수 있도록 하는 기능이다.
Step Out 은 해당 메소드를 디버깅 도중 더이상 확인할 필요성을 느끼지 못할때 이 메소드를 호출한 곳으로 복귀시켜주는 기능이다.
위 기능들이 잘 이해가 안될때 버튼의 그림을 유심히 살펴보면 의미를 이해할 수 있을 것이다.
옆 그림은 Stop 버튼을 활성화 시킨것이다. Stop 버튼을 활성화 시킨 후 웹에서 자바스크립트를 실행시키면 바로 멈춘다. 자바스크립트에서 setTimeout 혹은 setInterval은 시작부분이 어디인지 모르기 때문에 디버깅하기가 매우 곤란할때가 있는데 이때 Stop 기능을 이용해서 시작점을 찾을 수 있다.
