지금까지 본 Ajax 강의에서 소개한 주제를 크게 나열해 보면 다음과 같을 것이다.

1. Ajax 소개 및 구현(~4장)

2. HTML 코드 검사(5장)

3. 자바스크립트 테스팅 툴(6장)

이번 7장에서는 자바스크립트에 대한 디버깅 툴을 소개하려고 한다. Ajax 강의라고 해 놓고선 계속 자바스크립트 프레임웍과 툴만 소개한다고 불평할 사람도 있을 수 있다. 하지만 Ajax 는 4장까지 읽어본 사람이면 그것만으로도 구현은 충분하다. 되풀이 되는 이야기 이지만 나머지는 모두 자바스크립트 코드이기 때문에 한단계 위로 올라서기 위해서는 정말 많은 것을 알 필요가 있다.

Ajax 의 가장 큰 특징은 서버와 비동기로 통신한다는 것이다. 비동기로 통신한다는 것은 결국 백그라운드로 실행된다는 의미이므로 웹 사용자 뿐만 아니라 개발자에게도 디버깅을 하려면 결코 쉽지 않을 것이다. 브라우저의 요청을 서버가 제대로 받고 있는지, 서버가 요청을 적절하게 처리하는지, 브라우저에서 서버의 데이터를 받고 제대로 처리하고 있는건지 등등 명확히 알기 위해서는 일일히 로깅을 남겨서 눈으로 확인하기 전까지는 쉬운일을 아닐 것이다. 따라서 이번 7-1장에서는 브라우저단에서 Ajax 와 관련된 XMLHttpRequest Debugging 라는 아주 놀랄만한 디버깅 툴을 소개하고자 한다.

XMLHttpRequest Debugging 툴은 Julien Couvreur 가 자바스크립트를 이용하여 구현하였다. 이 툴을 이용하기 위해서는 아래 2가지를 설치해야 한다.  

첫째, 파이어폭스의 확장기능을 이용해서 GreaseMonkey 를 설치한다. GreaseMonkey 는 user script 라고 하는 자바스크립트를 추가해서 해당 웹페이지를 수정할 수 있도록 해준다. 설치방법은 AJAX 강의 5-2장 - FireFox 확장기능을 이용한 HTML 코드검사 을 참고하면 도움을 얻을 수 있을 것이다.

<GreaseMonkey 확장기능이 설치된 화면>

둘째, 파이어폭스 브라우저를 열고 다음 url 을 입력한다.

http://blog.monstuff.com/archives/images/XMLHttpRequestDebugging.v1.2.user.js 

위 url 은 XMLHttpRequest debugging 툴을 생성해주는 자바스크립트 파일이다. 브라우저 화면의 Install 버튼을 클릭하거나 파이어 폭스의 도구-> Install This User Script 메뉴를 선택하면 등록된다. 파이어 폭스의 도구 -> Manager User Script 메뉴를 선택하면 아래와 같이 디버거가 설치되어 있는 것을 확인 할 수 있다.

여기까지 정상적으로 설치를 한 후에 파이어폭스를 띄워보면 오른쪽 하단에 아래와 같은 GreaseMonkey 아이콘이 형성되었을 것이다.

이제 디버깅 툴에 대해서 살펴보자. 파이어폭스에 Ajax 를 테스트 해 볼 수 있는 url 을 입력한다. 4-9장에서 소개한 자동완성 기능 예제를 실행해 보면 아래와 같이 디버깅 툴이 브라우저와 같이 뜰 것이다.