통계 위젯 (화이트)

434
346
2205785

저작권

모든 내용은 허락없이 상업적으로 사용하실 수 없습니다. - 오광섭 -

클릭몬 (와이드)





자바스크립트 디버거.. ▣ 컴터야그 ▣

웹 프로그래밍시에 가장 아쉬운 것이 자바스크립트 디버거 인 것 같은데, 여러분들의 추천으로 몇개를 구경을 좀 해봤다.. 드디어 쓸만한 방법을 찾았다.. 그중 내가 쓰기 가장 좋은 녀석은 바로 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용도 이런게 나오면 좋을텐데..

핑백

덧글

  • kkongchi 2007/03/04 17:20 # 삭제 답글

    javascript 소스에 debugger;라고 행을 추가하면 자동으로 그 라인이 실행될 때, 디버깅IDE를 선택하는 창이 뜨게되죠..제 경우에는 비주얼 스튜디오와 Microsoft Script Debugger 중 선택하라는 창이 뜨는데, 아무래도 스크립트 디버거보다는 비주얼 스튜디오가 낫더군요....
  • codian 2007/03/05 03:54 # 삭제 답글

    무겁다는 것도 VS2005의 단점이라고 생각합니다.
  • 미친병아리 2007/03/26 00:23 # 답글

    kkongchi님 : 자바스크립트에서 그렇게 활용하는 방법도 있군요..

    codian님 : 맞습니다.. 2개 이상을 띄워두는데도 좀 부담스러울 지경이니..
  • ERIS 2008/02/02 22:15 # 삭제 답글

    FireFox사용자는 FireBug를 사용하시더군요.
    저도 사용해보려고 했는데... 아직 서툴러서 alert를 애용하고 있다는...;;

    VS .NET에 대한 정보도 여기서 얻어가네요 ^^
    정보 감사합니다.
  • 미친병아리 2008/02/03 02:02 # 답글

    ERIS님 : alert이 가장 확실한 방법이긴 하죠.. 손이 많이가서 귀찮은게 흠이지만..
  • TheProdigy 2009/05/23 01:55 # 답글

    1년이 지났군요... IE8 에서는 스크립트 디버거를 갖다가 붙였더군요... 좀더... 스타일시트를 제대로 인식하게 되면 과감히!!! IE8로 업그레이드 고려중입니다... 그리고 FF 에서는 WebDevelop 인가?? 하는 플러그인... 추가 기능?? 을 설치하면 나름 괜찮은 간단한 결과를 볼수 있습니다.
  • Fredric Cliver 2010/09/12 06:16 # 답글

    구글 크롬 브라우저에 기본으로 깔려있는 있는 개발자 도구를 추천합니다. 만족스럽게 쓰구 있네요 ^^ 개인적으로 익플거보단 편한 것 같아요.
    IE로 테스트 하고 싶으면 간단히 크롬에 IE 익스텐션을 설치하면 그만입니다.
    거기서 다시 개발자도구를 키면 IE 환경으로 디버깅이 가능하죠 ^^
댓글 입력 영역