[디버깅] JSDT(Javascript Debug Toolkit) - Eclipse Indigo에서 Javascript 디버깅하기

[디버깅] JSDT(Javascript Debug Toolkit) - Eclipse Indigo에서 Javascript 디버깅하기

Javascript 개발을 진행하면서 디버깅하는 방법은 여러가지가 있다.

• 해당 소스의 포인트에 alert, console.log와 같은 기능을 사용해서 데이터의 값, 기능 수행여부 등을 확인하는 방법(일명 로그를 찍어본다고 하는...)

• 각종 웹브라우저(IE, Firefox, Chrome 등)의 개발자 도구에서 제공하는 다양한 디버깅 기능들
  

이러한 방법들은 접근하기가 쉬우며 나도 여태껏 사용해왔던 방법이고 개발자들 사이에서도 가장 흔히 사용되는 보편적인 디버깅 방법이라 할수 있다.

하지만 이번 포스팅에서는 위에 소개한 방법이 아닌, Eclipse 에서 구동하는 웹 어플리케이션의 자바스크립트 소스를 디버깅하는 방법을 알아보도록 하겠다.

<< JSDT - Eclipse Indigo에서 사용법 >>

1. JSDT Eclipse Plugin 설치

Eclipse Indigo 버전의 경우 Maketplace 에서 'JSDT'를 검색해도 나오지 않는다. 그래서 공식 사이트에서 제공하는 최신 버전의 Update-site url 을 가져다가 Install New Software 를 이용해서 설치하려 했지만 이 또한, 404 에러가 뜬다. -_- 아마 Maketplace에 검색되지 않는 것은 Indigo 버전은 정식지원을 안하는 것 같다.

무튼 그래서 찾은 방법은 plugin 파일을 직접 eclipse 설치 경로의 plugins 폴더에(\eclipse\plugins\) 다운로드 받는 것이다.

우선 다음 사이트에서 jsdt plugin 파일을 다운로드 받는다. (ex: jsdt-2.2.0.zip)

https://code.google.com/archive/p/jsdt/downloads

다운로드 받은 파일의 압축을 풀어주면 다음 3개의 jar 파일이 있는데 이를 '\eclipse\plugins\' 경로에 옮겨준다.

• org.ayound.js.debug.core_2.x.x

• org.ayound.js.debug.engine_2.x.x

• org.ayound.js.debug.ui_2.x.x

2. 디버깅할 테스트 웹 프로젝트 생성

① Eclipse Indigo를 실행하여 새로운 테스트 프로젝트(Dynamic Web Project)를 생성하여준다.

② 디버깅할 자바스크립트(.js) 파일과 디버깅 대상이 되는 웹페이지(.html) 파일을 생성하여 준다.

③ 생성한 각 파일에 적절한 코드를 입력해준다.

- ex: 웹페이지에서 자바스크립트 함수를 호출할 버튼을 추가, 호출된 함수에서 값이 변하는 변수 생성

④ 작성된 자바스크립트 파일에서 'breakpoint'를 설정해준다. (breakpoint를 걸 라인 좌측에 더블클릭 혹은 우클릭 → 'Toggle Breakpoint'를 클릭하면 됨)

(보다 자세한 사항은 아래 <그림 1>을 참고하면 된다)

<그림 1> 디버깅할 테스트 웹 프로젝트 생성

3. 디버깅 시작

위에서 생성한 웹 프로젝트를 실행할 WAS(본인의 경우 톰캣)를 구동한다.

아래 <그림 2>와 같이 [디버깅 대상이 되는 웹페이지 마우스 우클릭] [Debug As] [Debug Configurations] [Javascript Debut] 선택 한다.

<그림 2> 디버깅 설정 (1)

이어서 다음 <그림 3>와 같이 아래 정보를 입력한다.

• url : (디버깅 대상 웹페이지 경로)

• browser : (테스트할 웹브라우저 실행파일 경로)

<그림 3> 디버깅 설정 (2)

입력을 완료했으면 'Debug' 버튼을 클릭한다.

그럼 자동으로 위에서 설정한 browser에 디버깅 대상 웹페이지가 실행되는 것을 확인할 수 있다.

자 이제 디버깅이 잘되는 지 확인해보자.

웹페이지에서 자바스크립트 함수를 호출하도록 설정해논 버튼을 클릭하면, 위에서 설정한 breakpoint에서 멈추는 것을 확인할 수 있다. 또한, 다음 <그림 4>에서와 이클립스의 UI가 Debugging mode로 변한 것을 확인할 수 있다.

설명을 덧붙이자면, 여기서 우리가 흔히 사용하는 부분은 'breakpoint'에 도착한 상태에서의 변수들의 정보를 'Variables' 탭을 통해 확인하면 된다. 위에서 설정한 breakpoint 모두 잘 실행되고 값 또한 확인이 된다면, 이번 Eclipse Indigo 버전에서 Javascript Debug 해보기를 문제없이 수행한 것이다.

(나는 문제없다 yeah~~~~)

아 그리고, Debug 탭에서 현재 디버깅 상태에서의 조작을 하는 버튼들과 단축키를 확인할 수 있다. 보다 자세한 사항은 다음 <그림 4>와 아래 리스트를 확인하기 바란다.

<그림 4> Debug 조작버튼

• Resume(F8) : 다음 브레이크 포인트를 만날때까지 진행

• Suspend : 현재 작동하고 있는 쓰레드를 멈춤

• Terminate(Ctrl+F2) : 프로그램을 종료

• Step Into(F5) : 메서드가 존재할 경우 그 안으로 들어가 메서드 진행 상황을 볼 수 있도록 함

• Step Over(F6) : 다음 라인으로 이동합니다. 메서드가 있어도 그냥 무시하고 다음 라인으로 이동

• Step Return(F7) : 현 메서드에서 바로 리턴

• Drop to Frame : 메서드를 처음부터 다시 실행