JSDT란?
JSDT (JavaScript Debug Toolkit)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다. JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.
JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
링크의 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의 구조를 보면 알겠지만 매우 획기적인 디버거라 할 수 있다는 것입니다.
- JSDT 란?
JSDT(JavaScript Debug Toolkit, 이하 JSDT로 표기함)는 IE, Firefox, Safari, Chrome, Opera 등 다양한 Web 브라우저를 지원하는 JavaScript 디버거입니다. JavaScript 디버거로는 Firefox Addon 인 Firebug가 꾀 유명하지만, 기존의 도구는 특정 Web 브라우저에서만 사용할 수 있는 것이 대부분입니다.
JSDT의 경우는 부가 기능을 설치하지 않고도 JavaScript 디버깅을 할 수 있습니다.
- JSDT의 구조
실제로 JSDT를 실행해보기 전에 JSDT의 동작원리에 대해서 살펴보겠습니다.
JSDT는 HTTP 프록시 서버를 내장하고 있어, 디버깅 웹 브라우저는 HTML및 JavaScript와 같은 리소스를 프록시를 통해 참조하게 됩니다. 이 경우 HTML 및 JavaScript가 프록시에 따라서 JSDT에 디버깅하는데 필요한 JavaScript가 자동으로 포함되게 됩니다. 포함된 JavaScript 코드는 XHR를 통해 디버거 쪽으로 필요한 정보를 전달합니다.
이러한 구조가 브라우저 쪽에 특별한 기능을 설치할 필요 없이 다양한 웹 브라우저에서 디버깅을 가능하게 합니다.
- JSDT 설치
이클립스 주노 버전의 Marketplace에서 검색해 보니 목록에는 나오지만 Install 버튼이 안보이네요. "Install New Software"를 통해 설치 합니다.
우선 이클립스 상단 메뉴 'Help > Eclipse Marketplace...'를 클릭 한 후 jsdt 로 검색 하면 두 번째에 'Javascript Debug Toolkit'에 대한 정보를 확인 할 수 있습니다.
Install 버튼이 없기 때문에 'Learn more' 를 클릭해서 Update site 확인 합니다. 또는
여기를 클릭해서 바로 이동합니다.
JSDT 2.2.0은 이클립스 3.2 이상부터 지원하고 있네요. 화살표 모양의 클릭해서 Update Site 주소를 복사해 놓습니다.
이클립스 상단 메뉴 Help > Install New Software 클릭해서 설치 창이 뜨면 'Add...' 클릭해서 Repository Location 에 좀 전에 복사한 URL을 붙여놓습니다.(Name은 임의로 넣음)
설치가 완료되면 이클립스가 재시작합니다. Debugger가 잘 작동되는지 간단하게 테스트 페이지를 만들어 보겠습니다.
간단하게 Test.html 페이지를 하나 만들고 breakpoint 를 찍은 후 F11 키로 debug 모드로 실행합니다. 아래와 같이 뜨면 Javascript Debug Toolkit을 선택을 하면 자바스크립트를 디버깅할 수 있습니다.
원하는 만큼 깔끔하게 동작하지는 않지만 이정도면 아주 훌륭한거 같습니다. 근데 문제가 하나 남았네요. Javascript debug Toolkit으로 실행하니 UT-8로 작성된 화면들에 대해 한글 깨짐 현상이 발생합니다.
그래서 다음과 같이 해결했습니다. 이클립스 홈 폴더에 있는 eclipse.ini 파일을 열어 vm argument로 파일 인코딩 파라미터를 추가했습니다.
위치는 -vmargs 바로 아래에 "-Dfile.encoding=utf-8"를 추가합니다.
이클립스 재시작 한 후 다시 한번 실행 시켜보니 한글도 정상적으로 잘 출력네요.
출처 - http://dalcong2life.tistory.com/14
이클립스 JSDT 플러그인 사용으로 자바스크립트(jQuery) 쉽게 사용하기 |
개발환경 : window 7 32bit, JDK 1.6, jQuery 1.9, Eclipse Indigo |
JSDT 는 자동완성 기능을 지원하기 때문에 자바스크립트 소스 개발에
아주 유용하다. 굳이 API 를 따로 찾아보지 않아도 되기 때문이다.
엄밀히 말하면 jQuery 사용을 편안하게 하기 위한 플러그인이다.
요즘은 자바스크립트 개발에 대부분 jQuery 를 사용하기 때문에 따로
구분해서 이야기 하지 않았다.
설치를 위해서 Marketplace 로 간다.
그리고 JSDT 를 검색해서 다운받는다.
2. include path 에 JSDT 추가 |
프로젝트를 선택하고 Properties 를 연다.
javascript > Include Path 를 클릭하게 되면 오른쪽에 등록된 라이브러리
리스트가 보일것이다. 여기에 추가하면 된다.
Add Javascript Library 버튼을 클릭해서 jQuery Library 선택하고 라이브러리
버전을 선택한후 종료한다.
아래 추가된 모습을 볼수 있다.
html 페이지를 만들어서 jQuery 자동완성 기능이 동작하는지 확인하자.
점을 찍고 ctrl + enter 를 누르게 되면 아래 그림과 같이 관련된 함수들이
나타나게 된다.
출처 - http://mainia.tistory.com/691
