웹 프로그래밍시에 가장 아쉬운 것이 자바스크립트 디버거 인 것 같은데, 여러분들의 추천으로 몇개를 구경을 좀 해봤다.. 드디어 쓸만한 방법을 찾았다.. 그중 내가 쓰기 가장 좋은 녀석은 바로 Visual Studio .NET 2005 이다.. 프로그램은 예전부터 설치되어 있었는데, 이것으로도 자바스크립트 디버깅이 가능한지 이제야 해봤다.. 쩝쩝.. 역시, 아는게 힘이다.. 자바 스크립트 디버깅 때문에 날려버린 시간이여.. 안타깝네..

사실 아주 오래전부터 인터데브를 사용하면 이런 식으로 디버깅이 가능했다고 한다.. 그런데 인터데브를 사용하는 사람이 별로 없었기 때문인지, 이런 방법으로 자바스크립트 디버깅을 하는 사람을 별로 못 본 것 같다.. 사실 내가 원하는 방법이 항상 요긴한것은 아니긴 하다..

스크립트 디버깅 상에서 가장 간단한 방법인 alert을 사용하여 값을 점검해보는 것이 대부분의 디버깅시 가장 유용하다.. 하지만, 각 객체들의 콜렉션, 프로퍼티 등을 디버거에서 점검해보고 이 값들이 어떻게 바뀌는지 종합적으로 보는데는 아무래도 alert을 사용하는데는 한계가 있다.. 한번에 보고 싶은 값들이 너무 많으니까..
사용하는 방법
예제로는 챠니님이 예전에 소개를 해주신 3D Walker의 자바스크립트를 사용해보자..

1. IE를 실행시켜 http://www.abrahamjoffe.com.au/ben/canvascape 로 접속을 한다..


2. Visual Studio .NET 2005를 실행시킨다..


3. 메뉴에서 도구 > 프로세스에 연결을 클릭한다..


4. 실행중인 프로세스가 나열된 창이 나타나면 거기서 방금 실행시킨 IE를 선택한다..
   (IE가 여러개 실행되어 있다면, 제목 부분에 표시되는 접속된 URL을 가지고 구분해야 한다..) - 이러면 Visual Studio .NET 2005의 화면이 디버그용으로 전환된다..


5. 메뉴에서 파일 > 열기 > 파일 을 클릭한다.. 파일열기 다이얼로그가 나타나면 파일이름 부분에 접속 URL을 복사해 붙여 넣는다..
   (여기서는 http://www.abrahamjoffe.com.au/ben/canvascape 를 붙여 넣는다..)


6. 5번에서 붙여넣은 주소의 HTML 내용이 보이게 되는데, 여기서 자바스크립트 부분으로 가서 브레이크 포인트를 걸면 디버거가 동작하는 것을 확인할 수 있다..

사용하기 간편하고, 비주얼하게 원하는 정보들을 찾아다니고 점검할 수 있으므로 alert에 비하면 훨씬 생산적인 디버깅을 할 수 있다.. 하지만, 나야 원래 Visual Studio .NET 2005를 사용중이니 상관이 없지만 그렇지 않은 사람은 단지 자바스크립트 디버깅을 위해 이 무거운 프로그램을 설치한다는건 좀 그렇다.. 간단하게 자바스크립트 디버깅만 가능한 프로그램이 있으면 좋은데 아직은 그만한게 없는 것 같다.. 아무래도 각 브라우저별로 특화된 자바스크립트 엔진과 밀접히 디버깅 정보를 주고 받아야 하니 만들기가 쉽지 않은가 보다.. (VS .NET 2005도 FireFox의 자바스크립트는 디버깅을 하지 못한다.. IE가 제공하는 자바스크립트 디버깅 정보가 다른 것 같다.. 자바스크립트 디버깅 정보도 표준화가 필요하다..)

장점
1. 브레이크 포인트를 걸어 라인별로 실행을 시킬 수 있다
2. 객체 탐색이 가능하다. 실시간으로 값의 변화를 점검할 수 있다
(다른 사람이 작성한 소스 분석시 유용하다..)

단점
1. Visual Studio .NET 2005를 설치해야 한다
2. IE에서만 정상 디버깅이 되고 FireFox에서는 되지 않는다

FireFox에서는 venkman 이라는 자바스크립트 디버거가 있다.. 자바스크립트에서만큼은 VS .NET 2005에서 할 수 있는 것이라면 다 할 수 있고, 자바스크립트 디버깅에 편리한 기능들까지 추가로 제공하고 있으니 venkman 이야말로 제대로된 자바스크립트 디버거라 할 수 있겠다.. IE용도 이런게 나오면 좋을텐데..