49206 Members __ Online

정렬
HOME스터디[s]프로그램(종합)

[AJAX] 강의 7-4장 - 디버깅툴/Venkman

posted by 라부
date : , update :
hit : 21867, scrab : 0 , recommended : 0

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

 

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


 

a7401
 
<Venkman v0.9.86 이 설치가 된 그림>
 
Venkman 이 설치되었다면 파이어폭스 메인 메뉴의 도구 -> JavaScript Debugger 를 클릭하면 아래 그림과 같이 Venkman 윈도우가 뜰 것이다.

a7402

 

 

Venkman 은 8개의 창으로 구성되어 있다. 각 창은 마우스 드래그 앤 드롭으로 메인 창내에서 위치이동이 가능하다. 또한 각각의 창은 아래 그림과 같이 왼쪽 상단의 덕킹 버튼을 통해서 메인 창에서 이탈시키거나 다시 원위치로 복귀가 가능하다.

 
a7403

 

개발자 특성에 따라 불필요한 창은 오른쪽 상단의 close 버튼으로 닫을 수 있다. 다시 열기 위해서는 View ->Show/Hide 에서 선택하면 된다. 또한 초기의 레이아웃으로 복구하려면 Command-line interface 에 /restore-layout factory 명령어를 입력하고 엔터키를 치면 원래대로 적용된다.


a7404

 

 

1. Loaded Scripts

Loaded Scripts 창은 현재 웹페이지에 <script> 로 정의된 모든 자바스크립트 코드 혹은 <script type="text/javascript" src="classicalInheritance.js"></script> 처럼 외부의 자바스크립트 파일을 인지하여 아래와 같이 보여준다. Loaded Scripts 에 스크립트가 잘 로드되지 않을 경우엔 파이어폭스를 모두 닫은 후 새로 열고 다시 url 을 실행시킨다. 그 후에 JavaScript Debugger 를 실행시키면 Loaded Scripts 창에 스크립트가 로드될 것이다.

 

a7405
 
 
위 그림처럼 Loaded Scripts 창의 + 싸인(html 혹은 .js 파일)을 클릭하면 해당 요소들의 메소드 리스트가  코드 라인과 함께 표시될 것이다. 각각의 요소를 더블클릭하면 해당 소스코드를 아래 그림처럼 Source Code 창에서 확인 할 수 있다.

a7406

 

 

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 로 표시된다.


a7407

 

autoComplete.html 의 Names 입력창에 a 를 입력하자. 그러면 실행이 중단되고 Venkman 소스 코드창은 아래와 같이 30 라인에 걸쳐 노란색 라인이 생겼을 것이다.

 


a7408
 
 
이번에는 future breakpoint 가 작동하도록 해보자. future breakpoint 는 메소드 밖에 존재하므로 해당 웹 페이지가 로드될때 실행된다. hard breakpoint 로 인해서 30 라인에서 멈춰진 프로세스는 Venkman 메인메뉴 밑에 있는 Continue 버튼을 눌러서 다시 실행시킨다. autoComplete.html 파일을 리로드하자. 아래 그림과 같이 23 라인에 걸쳐 노란색 라인이 생기고 오랜지색의 F 가 빨간색의 B 로 바뀔 것이다.
 

a7409
 
 
또한 Venkman 의 Breakpoints 창을 통해서 여러 파일에 걸쳐 설정된 breakpoints 를 아래 그림과 같이 확인 할 수 있다.
 

a7410

 

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

 


a7411
 
Continue는 break point 에서 멈춘 프로세스를 다시 시작하는 기능을 제공한다. 에러가 발생할 것이라 예상되는 곳에 브레이크 포인트를 여러개 설정한 후 Continue 를 눌러가며 디버깅을 하면 에러를 쉽게 발견할 수 있을 것이다.
 

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

 

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

 

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

 

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


a7412
 옆 그림은 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 를 클릭해보자.

 

a7413

 

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

 


a7414
 
<Breakpoints 창에서 Breakpoint Properties 선택하기>
 
 
그러면 아래와 같은 새로운 창이 뜰 것이다.
 


 

a7415
 
<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 의 기능을 확인하려면 검색어를 한글 대신 영문으로 입력해서 확인하기 바란다.
 


 

a7416
 
<Future Breakpoint Properties 창 설정에 의해서 멈춰진 화면>
 
 
4. Local Varialbes 창


 

a7417
 
위 그림은 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 창에 변수를 등록하는 방법을 익혀보자.


 

a7418
<1. Watches 창에서 오른쪽 마우스 클릭-> Add Watch Expression...선택>
 
a7419

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

 

a7420

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

 

 

6. Call Stack 창

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

 

a7421

 

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

 

7. Profile

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

a7422
 Profile 을 사용하려면 옆 그림처럼 Venkman 메인 메뉴 아래에 있는 Profile 버튼을 클릭해서 녹색의 체크아이콘이 표시되도록 한다. 그 후에 브라우저에서 해당 자바스크립트 코드를 실행한 후 Venkman 메뉴 -> Profile -> Save Profile Data As... 를 선택해서 원하는 포맷(텍스트, html, xml, csv) 파일로 저장한 후 확인하면 된다. 한번 프로파일 데이터를 파일로 저장한 후에는 File -> Profile -> Clear Profile Data 를 클릭해서 버퍼를 비운 후에 사용하자.


 

a7423
 
위 그림은 텍스트 형식의 프로파일 로그의 일정 부분이다. 메소드의 총 호출 건수 및 소요시간(msec) 을 확인 할 수 있으므로 어느 곳에서 병목현상이 발생하는지 보다 빠르게 확인 할 수 있을 것이다.
 
 

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

 

이것으로 7장을 마친다.









ajax, 강좌
댓글 1 | 엮인글 0

인젝션 키워드 관련 asp 소스 입니다.
[AJAX] 강의 7-3장 - 디버깅툴/Microsoft Script Debugger





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D64%22%3E%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%A8%28%EC%A2%85%ED%95%A9%29%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E