다양한 웹 브라우저를 지원하는 Javascript Debugger

Javascript를 디버깅하는 방법을 생각해 보면,  해당 소스의 포인트에 alert, console.log와 같은 기능을 사용해서 데이터, 기능수행여부 등을 확인하는 고전적인 방법이나, 각종 웹브라우저(Chrome, Firefox, IE…)의 개발자 도구에서 제공하는 다양하고 편리한 디버깅 기능을 사용하는 것이 대표적인 방법일 것이다. 하지만 이러한 보편적인 방법이 아닌, JSDT(Javascript Debug toolkit)에 관심을 갖게 된 이유는 바로 ‘다양한 웹브라우저 지원’이라는 타이틀 때문이었다. 당시 참여하고 있던 프로젝트에서 해당 업무의 UI개발(JSP, Javascript, Struts기반)을 주로 담당하고 있었는데, 고객이 사용하는 대표 브라우저에 대한 기준이 모호한 상태였다. 따라서, 크로스 브라우징에 대한 대비로, 대표되는 두 가지 이상의 브라우저 환경에서 개발 테스트를 진행했다. JSDT의 경우 구조적 특성상 브라우저에 제한 받지 않는 디버깅이 가능하다. 이러한 구조적 특징이 이 디버깅 방법에 관심을 갖게 된 첫 번째 이유이다. 구조에 대한 자세한 설명은 아래에서 하기로 한다.   Eclipse Plug-in 제공 위에서 언급한 프로젝트는 UI개발을 위해서 고려해야 할 사항이 한가지 더 있었다. 이 프로젝트는 다른 해외법인 시스템을 해당 국가의 업무요건에 맞추어 Customizing하거나 신규 개발하는 방식으로 진행되었다. 따라서, 기존에 개발된 화면의 기능을 개선하는 업무요건이 존재하는 프로젝트였다. 기능 개선의 업무요건으로 인해서, 기존 화면의 제어부분에 대한 분석과 함께 화면 기능 테스트가 좀 더 많이 필요했던 상황이었다 JSDT는 두가지 형태로(Swing 스탠드 애플리케이션, 이클립스 플러그인) 툴을 제공하고 있다. 이클립스 플러그인을 제공하기 때문에, 이클립스 환경에서 Javascript 디버깅이 가능하다. 사용하는 디버깅 방식이 이클립스로 집중되는 것은 효율적인 개발 환경을 만드는 이점으로 작용한다. 하나의 방식으로 디버깅이 가능하기 때문에, 좀 더 빠른 대응이나 처리가 가능하다.

JSDT의 구조

출처 - http://news.mynavi.jp/column/ide/063/index.html

JSDT는 자체적으로 HTTP 프록시 서버를 내장하고 있다. 디버깅을 위해서 수행되는 웹 브라우저는 HTML, Javascript와 같은 리소스를, JSDT에서 제공하는 프록시를 통해서 참조하게 된다. 이 말은, JSDT에 디버깅하는데 필요한 리소스(Javascript 등…)가 프록시에 따라서 자동으로 포함되게 된다는 뜻이다. 포함된 Javascript 코드는 XHR(XMLHttpRequest)를 통해서, 디버거 쪽으로 필요한 정보를 전달한다. 이러한 구조 덕분에 브라우저 쪽에 특별한 기능을 설치하지 않고도, Javascript를 디버깅하는 기능을 제공하게 된다. JSDT 설치(Eclipse Plug-in) 이클립스 플러그인 형태로 제공되기 때문에, 복잡한 절차없이 간단한 이클립스 업데이트를 통해서 설치가 가능하다. ( 테스트 이클립스 버전 : kepler)

1. Eclipse Maketplace에서 “JSDT” 또는 “Javascript Debug Toolkit” 검색해서 Update-site url 정보를 구한다.
[Update-site URL : http://jsdt.googlecode.com/svn/trunk/org.ayound.js.debug.update]

2. 플러그인 설치 Help -> Install New Software.

3. 아래 프로젝트 페이지를 통해서, 독립적으로 실행할 수 있는 애플리케이션의 다운로드도 가능하다. setup.exe 파일 다운로드한 후, 설치한다.
[URL : https://code.google.com/p/jsdt/downloads/detail?name=setup.exe]

JSDT 사용법(Eclipse Plug-in)

1. 테스트 웹프로젝트 생성

  1. Dynamic Web Project 생성
  2. Tomcat server 생성
  3. 테스트를 위한 html, javascript 파일 생성 : 간단한 클릭이벤트 처리 함수 생성

2. 웹브라우저에서 해당 테스트 페이지 로드
[URL : http://localhost:8080/JSDebugTestProject/TestView.html]

위와 같이, 정상적으로 테스트 페이지가 로드된 것을 확인한 후에 Javascript 관련 디버깅 설정을 시작한다.

3. 디버그 구성 설정(Debug Configurations 설정)
[화면경로 : 디버깅 타겟 파일 우클릭 -> Debug as -> Debug Configurations]

  1. Javascript Debug 우클릭 -> New 선택
  2. 테스트 페이지 url 입력 : 디버깅을 위한 타겟페이지 호출정보를 입력한다.
  3. 디버깅 브라우저 설정 : 해당 브라우저의 실행파일경로를 입력한다.

4. 디버그 실행 모드

위와 같이 테스트페이지 이벤트 발생시, 해당 Javascript 소스에 breakpoint를 지정해서 디버깅을 수행할 수 있고, 페이지의 variable 정보도 확인할 수 있다. 또한, 이 디버깅 툴의 특징으로 처음에 언급했던 것처럼, 어떤 브라우저에서 수행하느냐에 상관없이 디버깅할 수 있는 환경이 되었음을 확인할 수 있다.