Ssemi Laboratory

Written by Ssemi™(semin Seol), www.Ssemi.net

Javascript가 발전함에 따라 그에 따라 개발도 많이 발전하게 되었어요. 하지만 개발에 따른 유지보수를 위해 디버깅이 필요하기 마련입니다. 예전부터 인터넷 익스플로러(IE)에서는 자바스크립트는 디버깅이 어려웠어요. 자세한 설명도 없이 줄과 문자 그리고 오류 밖에는 나타내주는 내용이 없어요. 아래 그림과 같이요.


그런데 요즘에는 많은 개발을 도와주는 애드온(Add-on)이나 써드파티프로그램(Third-Party Program)들과 디버깅을 쉽게 해주는 툴(Tool)들이 많이 있죠. 지금 소개하는 것도 사실은 아주 오래전부터 있었지만, 잘 사용안하고, 어떻게 사용할지도 잘 모르는 그런 프로그램이죠.

그래서 이참에 정리를 해보려고 합니다.

▶ Internet Explorer (IE) - 인터넷 익스플로러

인터넷 익스플로러는 가장 유명한 - 그러나 가장 쓸모 없을 수 있는 - Windows Script Debugger를 제공합니다.
MS에서는 Windows Script Debugger를 제공함으로서 IE의 스크립트 디버깅을 도와주고 있답니다.

메뉴 > 도구 > 옵션 > 인터넷 옵션 > 고급 > 탐색 으로 이동하셔서
스크립트 디버깅 사용 안함(다른응용프로그램)
스크립트 디버깅 사용 안함(Internet Explorer)
두가지를 모두 사용 해재 하시고 확인을 누르세요

 ★ Windows Script Debugger 설치하러 가기 Click!! ★ 

설치 후에는 디버깅이 필요한 페이지라면 아래와 같은 화면이 나오면서 디버거가 실행됩니다.

어떤 소스에서 에러난지 확인 후에 수정을 하실 수 있습니다. 보통 브라우저에서 부르게 되면 읽기전용으로 읽어지기 때문에, 어디서 에러가 나는지 확인을 한 후, 편집툴을 통해 에러를 수정하는 편이 편리합니다.

사실 인터넷 익스플로러는 Visual Studio(이하 VS)가 나온 이후부터는 VS로 디버깅의 기능을 대신하기 때문에 VS를 쓴다면 위 소개한 디버거 프로그램을 설치할 필요는 없습니다. 스크립트 디버거 보다 VS의 무겁지만 막강한 기능의 디버깅을 통해 보다 더 쉽게 디버깅을 할 수가 있는 것이죠. 사실 VS를 설치하지 않으면서 IE의 디버깅을 원할 때는 위 소개한 프로그램이 나름 유용하게 사용될 수 있는 것이지요.

★ IE용 콘솔 디버깅 - Companion.JS

파이어폭스 플러그인 Firebug의 콘솔 API와 비슷한 IE용 디버깅 도구인 Companion.JS가 있습니다. IE의 플러그인 형태로 설치되며, 도구에 추가된 아이콘을 클릭하여 페널을 열 수 있습니다. 이제 IE에서도 콘솔 API가 도입된 편리한 자바스크립트 디버깅을 구사할 수 있겠습니다.

해당 플러그인은 Windows Script Debugger를 설치한 후에 사용하셔야 에러를 내지 않고 기능을 발휘합니다.

▶ FireFox (FF) - 불여우

FireFox(불여우)는 각종 Extension을 통해 자바스크립트 디버깅이 가능하답니다. 그중에 가장 유명한 것은 FireBug 입니다. 파이어버그는 파이어폭스의 플러그인 형태로 설치할 수 있는 애드온 애플리케이션입니다.

정말 감히 최고라고 칭하는 디버깅 도구입니다.
익스플로러에서 자바스크립트 에러가 났을 경우에 파이어폭스를 시작한 후, Firebug를 통해 에러를 파악해서 수정한 후에  인터넷 익스플로러로 다시 보는 그런 서슴없는(?) 짓도 진행할만큼 정말 멋진 툴이라고 밖에는 설명할 수 없네요.

★ Firebug 설치하러 가기

예전에 자바스크립트 디버그는 참 어렵다고 느껴졌었고, 대소문자의 차이, 세미콜론 빼먹기, 작은 따옴표(sing quot)와 큰 따옴표(double quot)의 차이로 삽질의 시간을 보낸 과거가 생각납니다.
스크립트가 발전하고 브라우져가 발전하면서 위와 같은 좋은 애드온 프로그램이 개발되어서 웹개발시 좀더 편안한 환경을 제공하고 있습니다.