Internet Explorer 에서 Javascript 코드 디버깅 쉽게 ..

MS IE에서 자바스크립트 오류를 디버깅하는 작업은, 사실 짜증의 연속이다. 에러가 발생해도 달랑 보여주는 메시지라는 게 원문의 몇번째 줄, 몇번째 문자에서 에러가 발생했다는 성의없는 팝업이 전부였다. (이에 비하면, 모질라의 파이어폭스는 제법 친절한 편이다.)

이게 다 MS가 비주얼 스튜디오(VS)를 좀더 팔아먹으려는 속셈(?)이 아닌가 의심했던 적이 있었다. 비주얼 스튜디오에는 Step Into, Step Over 와 같은 디버깅 실행 명령 뿐만 아니라 Break Point 설정과 변수 Watch 까지 대부분의 디버깅 관련 기능들이 모두 들어 있기 때문이다.

하지만, 좀더 찾아보니, MS에서도 거의 무료로 사용할 수 있는 괜찮은 자바스크립트 디버거를 제공하고 있었다. 그것도 두 가지 씩이나, 제공하고 있다. MSD(Microsoft Script Debugger), MSE(Microsoft Script Editor). 물론, 하도 꽁꽁 숨겨놓아서 쉽게 찾아 쓸 수가 없었다. MSD는 MS 웹사이트에서 여러번의 검색을 거쳐서 다운로드 받아서 설치할 수 있다. MSE는, 세상에, 누가 자바스크립트 디버거가 MS Office 패키지에 들어있다고 상상이나 할 수 있었을까! MS Office XP/2003 버전에 자바스크립트 디버거가 Microsoft Script Editor(MSE)라는 이름으로 들어있다. 그런데, 그냥 디폴트 설치로는 깔리지 않는다. 콕 찍어서 설치해야만 깔린다. (왜 이렇게 숨겨놓고 싶었던 것일까?)

MSD는 완전히 무료 프로그램이다. 반면, MSE는 MS Office의 정식 라이센스가 필요한 프로그램이다. 하지만, 회사 업무용 컴퓨터의 경우 대부분 MS Office 라이센스가 있을 것이므로, 완전 공짜는 아니지만, 거의 공짜에 다름없이 사용할 수 있는 셈이다.

이제 설치가 끝났다고, 해결된 게 아니다. 또다른 설정 작업이 남아있다. 자바스크립트 에러가 발생했을 때 자동으로 디버거가 작동하게 하려면, 확실하게 설정을 해줘야만 한다. (자동 연동 모드) 우선, 비슷한 이름으로 헷갈리게 만드는 Microsoft Script Debugger(MSD)를 설치해야 한다. 설치과정은 간단하다. 그냥 버튼만 꾹꾹 누르면 된다. 설치 완료 후에는 리부팅을 해야 하는 경우가 있다. 그게 싫으면, 설치 전에 모든 응용 프로그램 (특히 IE)을 모두 닫는다. 설치가 완료되면, IE의 보기(V) 메뉴에 스크립트 디버거(U)라는 항목이 생성되어 있는 것을 확인할 수 있다. 사실 MSD도 그런대로 쓸만한 디버거이다. MSE와 비교해보면, 변수값을 watching할 수 있는 창만 없고, 나머지 다른 기능들은 다 있다. 하지만, MSD를 사용해서 command window에서 변수 이름을 하나씩 입력해가며 디버깅하다 보면 성격이 나빠질 우려가 있다. 그러니 조금만 더 써서 MSE 까지 설치하는 편이 낫다.

또다른 설정 작업 하나 더. IE : 도구 -> 인터넷 옵션 -> 고급 -> 스크립트 디버깅 사용 안함 항목이 언체크 되어 있어야 한다.

이제, 스크립트 오류가 발생하면, 몇가지 대화박스에서 MSE를 선택할 것인지를 묻는 과정을 거쳐서, MSE가 본격적으로 작동하게 된다.

MSD의 또다른 작동 방법은, 아예 바탕 화면에 아이콘으로 끌어내 놓고 독립적으로 실행하는 것이다. (독립 실행 모드) C:\Program Files\Microsoft Office\Office10\MSE7.EXE (XP에서는 Office10 폴더, 2003에서는 Office11 폴더 밑에 있음) 파일의 바로 가기를 바탕 화면에 생성한다. 그리곤, 더블 클릭을 해보면, MSE가 실행된다. 디버거 기능 외에도 HTML 화면 편집기로 사용해도 손색이 없다. 꽤 쓸만 한툴이다. 암튼, 자바스크립트 디버깅을 하기 위해서는 실행되고 있는 IE 프로세스와 연결을 해야 한다. 디버그(D)->프로세스(P) 메뉴를 누르면, 대화창이 열리는데, 현재 실행되고 있는 각종 응용 프로그램 프로세스 가운데에서 디버깅 하려는 IE 프로세스를 선택하여 '연결' 버튼을 누르면 된다.

주의할 점은, MSD나 MSE 모두 현재 실행중인 프로세스에 '연결'되는 방식이기 때문에 MSD나 MSE를 닫으면 기존의 프로세스도 함께 닫혀 버린다는 것이다. 이걸 방지하려면, 디버깅이 끝난 후에는 디버그(D)->모두 분리(D) 메뉴를 누르면 된다.

설치

MSD는 아래 링크에서 다운로드 받을 수 있다. [2006/10/10: MSE를 설치할 거라면, MSD는 설치하지 않는 게 좋겠다. MSD를 먼저 설치하면 MSE를 설치할 때 뭔가 영향이 있다. MSD는 그냥, 이런 게 있었다는 정도로만 기억해두고, MSE를 본격 설치해서 사용하자]

 

[윈XP, 2000 이상] Download details: Script Debugger for Windows NT 4.0 and Later Script
[윈98, 윈Me] Debugger for Windows 98, Me, NT 4.0 

MSE는 MS Office XP/2000 패키지에 들어있다.

설치방법과 설정방법은, 다음과 같다.

1. MS Office 설치 CD를 준비한다.

2. 이미 MS Office가 설치되어 있다면, 워드, 엑셀, 파워포인트, 프론트페이지 중 하나를 실행한다.

3. 도구->매크로->Microsoft Script Editor 항목을 클릭한다.

4. 설치 프로그램 요청에 따라 MS Office 설치 CD를 넣고 해당 항목을 찾아서, 설치한다.

* MS Office 를 처음 설치하는 경우에는, 커스텀 설치에서 MSE 항목을 찾아서 선택한 후 설치를 진행한다.

요약

- IE 에서 사용할 수 있는 MS 디버거는 MSD, MSE가 있다. 둘은 조금 다르다. MSE를 자동 연동 모드로 사용하려면 MSD가 있어야 한다. MSE가 더 낫다.

- MSE는 '자동 연동 모드'와 '독립 실행 모드' 두 가지로 실행할 수 있다.

- 모든 스크립트 에러마다 팝업이 뜨는 '자동 연동 모드'가 불편할 때에는, IE : 도구->인터넷 옵션->고급->스크립트 디버깅 안함 항목을 체크하면 된다.

- MSE 디버깅 작업이 끝났다고 바로 MSE 윈도우를 닫지 말고, 디버그(D)->모두 분리(D) 메뉴를 실행하여, MSE 와 디버깅 프로세스의 연결을 끊어 준다. 그래야 디버깅 하던 IE 프로세스가 계속 살아있게 된다.

정정

회사에 있는 피씨는 워낙 많은 프로그램을 깔았다 지웠다를 반복해서 몹시 지저분해져 있다. 그래서 혹시나 하고 집에 있는 피씨에서 다시 실험해봄.

역시나, MSE 하나만 설치해도 된다. 자동 연동 모드를 위해 MSD가 꼭 필요했던 게 아니었다. MSE 하나만으로도 자동 연동 모드와 독립 실행 모드 두 가지 모두 잘 돌아간다.

더구나 실험을 했던 회사 피씨에서는 이상하게도 인터넷 옵션의 '스크립트 디버깅 안함' 항목을 선택하면 '보기' 메뉴에서 '스크립트 디버거' 항목 자체가 없어져 버리고, 리부팅하면 MSD마저 사라져 버리는 이상한 증세가 자꾸 발생하고 있다. 너무 오래 썼나 싶다. 깔끔하게 밀고 OS부터 새로 깔아야 할까 보다.

다시 정정

인터넷 옵션의 '스크립트 디버깅 안함' 항목을 선택하거나 해제하면 그에 따라 '보기' 메뉴의 '스크립트 디버거' 항목이 없어졌다가 새로 생겼다가 한다. 원래 그렇게 만들었나 보다.