이번 7-2장에서는 Microsoft Script Debugger 에 대해서 살펴보자. 일단 디버거를 Microsoft Script Debugger download 에서 다운받아 설치하자.

설치후에 인터넷 익스플로어 메뉴 도구 -> 인터넷 옵션 -> 고급에서 아래 그림과 같이 스크립트 디버깅 사용 안 함(Internet Explore) 체크를 해제한다.

이후엔 브라우저에서 자바스크립트 에러가 발생하면 아래와 같은 창이 뜰 것이다.

사실 자바스크립트 디버거가 위와 같이 에러가 발생하는 지점을 정확히 지적해 주는 것만으로도 개발자에게는 아주 큰 도움을 준다. 하지만 개발 목적이 아닌 자료를 찾기 위해서 인터넷을 사용하는 경우 자바스크립트 에러가 발생했을때 디버거 툴은 상당히 귀찮은 존재이기 때문에 개발시에만 인터넷 옵션의 체크를 풀어서 사용하기를 권장한다.

또한 Microsoft Script Debugger 는 자바스크립트 뿐만 아니라 VBScript 의 에러까지 감지할 수 있다. 현재 대한민국 브라우저 시장의 대부분을 IE 가 잠식하고 있다고는 하더라도 cross browser 에 대한 배려 차원에서 표준을 준수하는 코딩습관을 가졌으면 한다.

이번 7-4장에서는 Venkman 모질라 자바스크립트 디버거에 대해서 알아보자.

현재 Venkman 설치를 위한 Firefox Add-ons Venkman 웹 싸이트는 파이어폭스 1.0 까지만 지원하는 Venkman 이 올라와 있는 등 업데이트가 상당히 늦어지고 있다. 따라서 가장 최신 버젼의 Venkman 을 가장 최신버젼의 파이어폭스에 설치하기 위해서는 getahead venkman 웹싸이트에 접속해서 설치를 하자. venkman development 라는 Venkman 개발 싸이트도 있으나 getahead 싸이트에서 가장 최신버젼의 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 창에 스크립트가 로드될 것이다.

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 라인에 걸쳐 노란색 라인이 생겼을 것이다.

브레이크 포인트를 걸 수 있다는 것은 디버깅을 위한 준비가 되었다는 것을 의미한다. 브레이크 포이트를 걸고 현 시점의 변수의 값이 맞는지 확인 하거나 수정할 수 있다. 브레이크 포인트를 걸면 아래와 같은 4가지 기능을 사용할 수 있다.

Step Over 는 디버깅중 다른 메소드를 호출하는 부분을 그냥 넘어가는 기능이다. 디버깅을 할때는 소스 코드를 한줄 한줄 확인하게 되는데, 이미 어떤 메소드는 충분히 디버깅 했을 경우나 혹은 에러가 없다는 확신이 있을때는 굳이 그 메소드를 다시 검사할 필요는 없을 것이다. 하지만 Step Over 를 클릭했다고 해서 해당 메소드의 내부 로직을 건너 뛰는 것은 아니며 전부 실행된다.

Step Into 는 Step Over 의 반대개념이다. 디버깅중 메소드 호출부분이 나올때 Step Into 를 클릭하면 해당 메소드 내부로 들어가고 계속 디버깅 할 수 있도록 하는 기능이다.

Step Out 은 해당 메소드를 디버깅 도중 더이상 확인할 필요성을 느끼지 못할때 이 메소드를 호출한 곳으로 복귀시켜주는 기능이다.

위 기능들이 잘 이해가 안될때 버튼의 그림을 유심히 살펴보면 의미를 이해할 수 있을 것이다.

 옆 그림은 Stop 버튼을 활성화 시킨것이다. Stop 버튼을 활성화 시킨 후 웹에서 자바스크립트를 실행시키면 바로 멈춘다. 자바스크립트에서 setTimeout 혹은 setInterval은 시작부분이 어디인지 모르기 때문에 디버깅하기가 매우 곤란할때가 있는데 이때 Stop 기능을 이용해서 시작점을 찾을 수 있다.

3. Break points 창

for 문 안을 디버깅할때 데이터가 많을 경우 일일히 Step Over 버튼을 눌러가며 확인하기는 정말 귀찮을 것이다. 만일 에러가 일정한 지점 혹은 값에서 발생한다면 for 문의 모든 데이터를 확인할 필요없이 그 값이 나오는 n 번째 실행에서 제어를 멈추고 변수의 값을 확인하며 디버깅을 할 수 있으면 무척 편리할 것이다.

예를 들면서 설명하겠다. Source Code 창에 break point 를 걸면 Breakpoints 창에도 표시된다. 아래 그림은 AJAX 강의 4-9장 - 자동완성 기능 구현하기 의 autoComplete.html 의 setNames 메소드의 for 문안에서 nextNode 값을 얻어오는 부분에 hard break point를 설정한 것으로 해당 브레이크 포인트에 마우스 오른 버튼을 클릭하고 Breakpoints Properties 를 클릭해보자.

<Source Code 창에 hard break point 를 설정한 화면>

<2. 등록할 변수명 입력>

<3. 디버깅하면서 변수의 값을 확인한다.>

6. Call Stack 창

Venkman 은 Call Stack 창을 통해서 호출되는 메소드 리스트를 확인 할 수 있다.

위 그림은 Call Stack 창에 setNames 와 callback 두개의 메소드가 존재함을 나타낸다. 맨 위에 위치한 메소드가 현재 디버깅중인 메소드이고 그 밑에 있는 callback 메소드는 현재 메소드를 호출하고 있는 메소이다. 즉 callback 메소드 안에서 setNames 를 호출할 경우 위와 같이 표시된다. 즉 Call Stack 창에 표시되는 순서는 메소드 호출 순서를 의미한다. 메소드 호출관계가 상당히 복잡할 때 Call Stack 창을 활용하면 메소드간 호출관계를 쉽게 파악할 수 있다.

7. Profile

Ajax 개발에 익숙해지면 스크립트 코드의 양도 덩달아 늘어난다. 따라서 서버쪽 프로그램 뿐만 아니라 스크립트 코드로 인해서 병목현상이 발생할 수 있다. Ajax 는 백그라운드로 실행되므로 어느 곳에서 시간이 소비되고 있는지 파악하기 힘들다. Venkman 은 Profile 이란 기능을 통해서 각 메소드가 몇번 호출되었고 소요시간(milli second)은 얼마나 되는지 데이터를 수집해서 친절하게도 텍스트, html, xml, csv 형식의 파일로 저장해 준다.

이번 7장에서는 Ajax 및 자바스크립트의 버그를 찾는데 도움을 줄 수 있는 3가지 툴에 대해서 소개하였다. 한 연구결과에 의하면 개발자가 업무에 쏟는 시간의 반은 다른 사람이 작성한 코드에서 발생하는 에러를 찾거나 해결방안을 모색하는데 소모한다고 한다. 혼자 풀기 힘들다면 툴을 사용해 보자. 단순히 에러를 찾고 해결하는 것 이상의 무엇인가를 얻을 것이다.

이것으로 7장을 마친다.