JSDT란?
JSDT (JavaScript Debug Toolkit)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다.  JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.

JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
 

http://www.ibm.com/developerworks/kr/library/os-eclipse-jsdt/
http://wiki.eclipse.org/index.php/ATF/JSDT
링크의 JSDT (JavaScript Development Toolkit)와는 다른 디버깅을 위한 툴입니다.


JSDT의 구조
실제로 JSDT를 실행해보기 전에 JSDT의 동작원리에 대해서 살펴보겠습니다.

JSDT는 HTTP 프록시 서버를 내장하고 있어, 디버깅 웹 브라우저는 HTML및 JavaScript와 같은 리소스를 프록시를 통해 참조하게 됩니다.  이 경우 HTML 및 JavaScript가 프록시에 따라서 JSDT에 디버깅하는데 필요한 JavaScript가 자동으로 포함되게 됩니다. 포함된 JavaScript 코드는 XHR를 통해 디버거 쪽으로 필요한 정보를 전달합니다.
 

이러한 구조가 브라우저 쪽에 특별한 기능을 설치할 필요 없이 다양한 웹 브라우저에서 디버깅을 가능하게 합니다.


JSDT를 사용
JSDT 프로젝트 페이지에서 Swing 스탠드 애플리케이션 및 Eclipse 플러그인을 제공하고 있습니다.
우선 간단하게 사용할 수 있는 Swing 버전을 다운로드하여 사용해 봅니다.  윈도우의 경우 setup.exe 파일을 다운로드 받아 설치하면 다음과 같은 창이 나타납니다.

 

디버깅할 HTML 파일과 웹 브라우저의 실행 파일을 선택하고 시작 버튼을 클릭하고 디버깅을 시작할 수 있습니다.

사용은 일반적인 디버거와 비슷합니다.  디버깅을 시작하면 JSDT의 소스 코드 편집기에 소스코드가 표시되기 때문에, 정지하고자 하는 위치에 중단점(Breakpoint)을 찍고 단계별 스텝 오버, 스텝 아웃을 할 수 있습니다.  변수의 값은 variables 탭에서 확인할 수 있으며, expression 탭에서 임의의 표현식을 등록하고 평가 결과를 볼 수 있습니다.
  
Eclipse 플러그인 버전도 기본적인 사용법은 동일합니다.  다운로드 페이지에서 jsdt – 2.1.0.zip 을 다운로드 하고 적당한 위치에 압축을 푼 후, 업데이트 관리자에서 플러그인을 설치할 수 있습니다.  Eclipse 플러그인 버전에서는 디버거로서의 기능뿐만 아니라, 구문 검사 기능 등을 갖춘 유용한 JavaScript 편집기도 제공되며, JavaScript 편집기에서 임의의 행을 클릭하여 중단점을 설정할 수 있습니다.

Eclipse에서 JavaScript Debugging 모습

JavaScript Debug Configuration 설정 모습



Eclipse 의 웹 작업 영역에서 HTML 파일을 선택하고 마우스 오른쪽 클릭 -> “debug” -> “JavaScript Debug Tool”으로 디버깅을 시작할 수 있습니다.


정리
JSDT는 HTTP 프록시가 디버깅 코드를 삽입하는 방법을 이용하여 브라우저 측에 특수 기능 등을 필요로 하지 않고 사용자 웹 브라우저에서 JavaScript 디버깅을 가능하게 하고 있습니다.  또한 독립 실행형 버전과 Eclipse 플러그인 버전을 제공하고 있으며, 개발 스타일에 맞춰 선택할 수 있습니다.

그러나 아직까지는 몇몇 문제점들이 남아있습니다.  실제로 개발에 적용해보는 것은 어려울 지도 모르겠습니다.  하지만 그런 문제점들을 떠나서 JSDT의 구조를 보면 알겠지만 매우 획기적인 디버거라 할 수 있다는 것입니다.  


출처 : http://journal.mycom.co.jp/column/ide/063/index.html 

신고
Posted by Rhio.kim
사용자 삽입 이미지


사용자 삽입 이미지

별거 아닙니다.
FF에는 파이어 버그가 있어서window.console.log('debug'); 로 디버깅 메세지를 쉽게 볼 수 있는데요.

IE, Opera, Safari(최근 버젼에서는 지원하죠?) 에서는 원활히 지원되지 않아서..

급작스럽게 만든 티가 엄청 납니다.. ^-^;
나만 쓸껀데 뭐 ㅎㅎㅎ

그럼 머한데 공개했냐..?
자랑하려구요 ㅠ.ㅠ

갑자기 만들걸 자랑한다고? 
그럼 어쩌라구요?



간단하게 String native에 추가를 해버렸습니다.


사용법은 매우 아니 너무 간단합니다.


신고
Posted by Rhio.kim
사용자 삽입 이미지
CompanionJS 개발자인 Jean-Fabrice Rabaute는  IE 개발자들을 위한 파이어 버그를 목표로 개발하고 있네요.
이번 버젼에서는 선택한 엘리먼트의 DOM tree를 볼 수 있습니다. 또한 소스 코드, 새로운 스타일을 적용시킬 수 있고 style, layout, attribute 들을 바꿀 수 있습니다.
파이어 버그의 DOM inspector가 이번 DebugBar 와 같은 기능을 하겠네요.
아직은 Beta고 또한 기능 보완이 된다면 파이어 버그같이 좋은 디버깅 툴이 되리라 봅니다.


신고
Posted by Rhio.kim