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 를 설정한 화면>
<Breakpoints 창에서 Breakpoint Properties 선택하기>
그러면 아래와 같은 새로운 창이 뜰 것이다.
<Future Breakpoint Properties 창>
Future Breakpoint Properties 창에서 위 그림처럼 When triggered, execute... 체크를 선택하고 텍스트 박스에 return nextNode == "스타크래프트"; 를 입력하자. (위 텍스트 박스에는 임의의 자바스크립트 코드를 넣어서 디버깅시 유용하게 사용할 수 있다. __count__ 는 iterator 의 반복값을 의미한다.)그리고 Stop if result is true 를 선택하자. 이것은 autoComplete.html 의 86 라인의 nextNode 값이 스타크래프트이면(true 이면) 실행을 멈추란 것이다. Apply 버튼을 눌러 설정을 저장하고 Close 버튼을 눌러 창을 닫자. 웹 브라우저의 검색어 창에 스타를 입력하자. 그러면 아래 그림과 같이 Venkman 이 86 라인에서 실행을 멈출 것이다. 만일 스타를 입력했을때 서버에서 전달된 데이터 중에 스타크래프트가 없다면 브라우저의 실행은 멈추지 않을 것이다. 디버깅중 nextNode 값을 확인하려면 Local Variabes 창을 이용하면 된다. 다만 한글의 경우 서버에서 UTF-8 charset 으로 인코딩되어 전달하고 있으므로 값을 확인해도 디코딩하기 전의 값이므로 읽을 수가 없다. 따라서 Stop if result is true 의 기능을 확인하려면 검색어를 한글 대신 영문으로 입력해서 확인하기 바란다.
<Future Breakpoint Properties 창 설정에 의해서 멈춰진 화면>
4. Local Varialbes 창
위 그림은 Local Variables 창을 나타낸 것이다. Local Variables 창은 디버깅중 변수의 값을 확인하거나 직접 값을 수정해서 테스트 해 볼 수 있는 아주 유용한 기능을 제공한다. Local Variables 창을 보면 최상위 아아템으로 scope 와 this 두가지가 있음을 확인할 수 있다.
scope 는 메소드 내부의 지역변수 목록을 포함하고 있다. 대부분의 자바스크립트는 메소드 단위로 작성되므로 메소드안에 브레이크 포인트가 설정되면 설정 포인트 주변의 변수를 값과 함께 나열한다. 디버깅하면서 각 변수의 값이 어떤지는 Local Variables 창의 scope 아이템을 펼쳐서 확인하면 된다.
this 는 자바스크립트의 전역변수 목록을 나타낸다. 일반적인 this 키워드는 윈도우 객체의 레퍼런스 이므로 메소드 밖에 전역변수 var xxx... 으로 선언된 변수 뿐만아니라 윈도우 속성들도 다수 포함되어 있다.
위 Local Variables 창을 보면 변수 왼쪽에 아이콘이 있을 것이다. 이 아이콘들은 데이터의 타입을 의미하는데 boolean, double, integer, null, object, string, void 등에 해당하는 아인콘이 모두 다르므로 참고하자.
만일 Venkman 을 사용하지 않고 자바스크립트 코드를 디버깅한다면 수많은 alert() 를 찍어가며 하나하나 값을 확인 해야만 했다. 디버깅이 종료된 후에는 alert() 메소드는 삭제해야 하고, 디버깅 완료 후에도 디버깅이 필요한 상황이 발생하면 다시 alert() 메소드를 이용한 확인작업을 해야 했다. 하지만 Venkman 을 이용해서 디버깅하는 작업에는 브레이크 포인트를 설정하고 Local Variable 창을 통해서 값을 확인하면 그것으로 끝이다.
또한 Local Variables 창을 통해서 DOM 오브젝트의 속성에는 어떤것들이 있는지 파악할 수 있다. 예를 들어 HTMLTableElement 의 속성에 offsetHeight, offsetLeft 가 있는지 혹은 철자는 정확한지 알 수 있다. 이미 알고 있다면 상관없겠지만 Local Variables 창은 DOM 요소의 속성을 파악 하는데에도 유용하게 사용할 수 있다.
Local Variables 창에서 마지막으로 확인할 것은 런타임시 변수의 값을 수정해서 디버깅할 수 있는 기능이다. 만일 에러가 발생하는 지점을 알고 있다면 변수의 값을 수정해서 테스트를 해보고 싶을 것이다. 수정한 변수의 값으로 에러가 해결 되었다면 왜 잘못된 값이 들어왔는지 역으로 추적이 가능하기 때문에 디버깅에는 없어서는 안될 필수 기능이라 하겠다. 사용하는 방법은 마우스로 더블클릭하거나 마우스 오른버튼 -> Change Value 를 선택하면 변수 값을 수정할 수 있는 prompt 창이 뜰 것이다. 이곳에는 유효한 자바스크립트 표현식(예 new Object() 등)을 입력하면 된다. String 값의 경우는 쌍따옴표 혹은 홀따옴표로 감싸야 한다.
5. Watches 창
Watches 창은 Local Variables 창과 비슷한 기능을 제공한다. 차이점이라면 개발자가 보고 싶은 변수만 미리 등록해 놓고 볼 수 있다는 것이다. Local Variables 창은 브레이크 포인트로 설정된 지점(메소드 내부의 모든 변수 및 전역 변수, 윈도우의 모든 속성들)의 모든 변수를 보여준다. 목록이 너무 많으면 찾기도 수월하지 않기 때문에 원하는 변수를 Watches 창에 등록해 놓고 마치 Local Variables 창인양 사용하면 된다. 다만 Watches 창을 통해서 변수의 값을 수정할 수는 없다. 다음 그림들을 통해서 Watches 창에 변수를 등록하는 방법을 익혀보자.
<1. Watches 창에서 오른쪽 마우스 클릭-> Add Watch Expression...선택>
<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 형식의 파일로 저장해 준다.
Profile 을 사용하려면 옆 그림처럼 Venkman 메인 메뉴 아래에 있는 Profile 버튼을 클릭해서 녹색의 체크아이콘이 표시되도록 한다. 그 후에 브라우저에서 해당 자바스크립트 코드를 실행한 후 Venkman 메뉴 -> Profile -> Save Profile Data As... 를 선택해서 원하는 포맷(텍스트, html, xml, csv) 파일로 저장한 후 확인하면 된다. 한번 프로파일 데이터를 파일로 저장한 후에는 File -> Profile -> Clear Profile Data 를 클릭해서 버퍼를 비운 후에 사용하자.
위 그림은 텍스트 형식의 프로파일 로그의 일정 부분이다. 메소드의 총 호출 건수 및 소요시간(msec) 을 확인 할 수 있으므로 어느 곳에서 병목현상이 발생하는지 보다 빠르게 확인 할 수 있을 것이다.
이번 7장에서는 Ajax 및 자바스크립트의 버그를 찾는데 도움을 줄 수 있는 3가지 툴에 대해서 소개하였다. 한 연구결과에 의하면 개발자가 업무에 쏟는 시간의 반은 다른 사람이 작성한 코드에서 발생하는 에러를 찾거나 해결방안을 모색하는데 소모한다고 한다. 혼자 풀기 힘들다면 툴을 사용해 보자. 단순히 에러를 찾고 해결하는 것 이상의 무엇인가를 얻을 것이다.
이것으로 7장을 마친다.
