파이어버그를 이용한 자바스크립트 디버깅..

FireBug는 파이어폭스의 디버그용 에드온 입니다. 이 파이어버그를 이용해서 javascript를 좀 더 유연하고, 우아하게 디버깅하는 방법을 소개 해 볼까 합니다.

전 이걸 모르기 전까지는 주로 alert을 사용해서 주로 디버깅을 했습니다. -_-;;
정말 시끄럽고 우아하지 않은 방법이였는데.
firebug 덕분에 우아한 자바스크립드 디버깅이 가능해 졌습니다 ^^;

먼저 준비물..

FireFox : http://www.mozilla.or.kr/ko/
FireBug (파이어폭스 에드온) : https://addons.mozilla.org/en-US/firefox/addon/1843

파이어폭스를 설치 하시고 에드온을 설치 하시면 됩니다.

설치가 제대로 되었다면 위 스샷과 같이 바퀴벌레 한마리가 파폭 오른쪽 하단에 생깁니다. 벌레라서.. 짜증 날지도 모르지만, 자주 사용하다 보면, 너무 유용해서 애정까지 생기게 됩니다.

샘플 코드
test.html

<html>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>파이어버그를 이용한 자바스크립트 디버깅</title>
    <script type="text/javascript" src="test.js"></script>

</head>

<body>
파이어버그를 이용한 자바스크립트 디버깅
</body>
</html>

test.js

//스택 만들어 주기.
function Stack(){
    this.list = [];
}

Stack.prototype.push = function(value){
    this.list.push(value);
}

Stack.prototype.pop = function(){
    return this.list.pop();
}

Stack.prototype.size = function(){
    return this.list.length;
}

//스택의 내용으로 스트링 만들어 주기.
Stack.prototype.toString = function(){
    var temp = '[ ';
    for(var i = 0, length = this.list.length; i <= length; i++){
    temp += this.list[i];
    if(length - i != 1){
        temp += ', ';
    }
    }
    temp += ' ]';
    return temp;
}

var fileName = "test.js"

var stack = new Stack();
stack.push(1);
stack.push(2);
stack.push(3);
stack.push(4);
stack.push(5);
alert(stack.toString());

샘플 코드 다운로드 :

firebugsample.zip

FireBug의 꽃... 스트립트 브레이크 포인트 걸기

샘플코드를 실행 하시면, 알림창이 하나 똑~ 뜰겁니다.. 살포시 닫아 주시고, 오른쪽 하단의 파이어버그 버튼을 눌러주세요. 그리고 스크립트 탭(?)을 눌러 줍니다. 그러면, 스크립트 코드가 나옵니다. 그리고 all옆에 있는 콤보를 클릭하면, 현재 파일에서 포함된 스크립트 목록이 나옵니다. 여기서 test.js를 선택 해 줍니다. 일반적으로 사이트를 제작하면서 보면, 스크립트 파일을 여러게 포함하게 되니까.. 이런 파일들은 여기서 찾아서 선택해 주시면 됩니다.

그리고 샘플소스에서 20번째 줄 옆을 클릭해서 브레이크 포인트를 걸어 줍니다. 그리고 F5를 눌러서 페이지를 새로읽기를 합니다.
그러면, 아래 스샷과 같이 브레이크 포인트가 걸리게 됩니다. 그리고 옆 창에 있는 감시를 눌러 주시면, 현재 브레이크 포인트에서 설정된 값들이 출력되게 됩니다.

그러면 브레이크 포인트 이동.. 이동은 상단의 버튼으로 하시면 됩니다.

순서대로 설명 드리면, 실행, 함수안으로(F11), 한줄씩 실행(F10), 함수 밖으로.. 이렇게 구성되어 있습니다. 이렇게 현재의 값을 보면서, 스크립트 디버깅을 하시면, 훨씬 편하게 하실 수 있습니다.

콘솔에 메시지 찍기

test.js파일에 아래와 같이 추가를 해 보고 실행을 해 봅니다.

console.log(stack.toString());
console.debug(stack.toString());
console.info(stack.toString());
console.warn(stack.toString());
console.error(stack.toString());

그러면 파폭의 오른쪽 하단에 아래와 같은 메시지가 출력 됩니다. 오류가 2개나 있답니다. ^^

이건 console.warn과 console.error때문입니다.
오류가 있다고 하니 봐야 겠죠? 파이어버그에서 콘솔 탭을 클릭해 봅니다.
그러면 아래와 같이 출력이 되어 있을 겁니다. 혹시 출력이 안 되어 있다면, F5로 다시 읽기해 주세요.. 가끔 그런 경우가 있더라구요.

이걸 사용하면 alert이나 스트링 출력으로 하던 디버깅의 수고를 덜 수 있습니다.

그런데 주의 할 점은 이 console 명령어가, 데브툴이 설치되어 있지 않은 브라우저에서는 동작을 안 하고.. 스크립트가 멈추는 경우가 있습니다. 디버깅 이후에는 오류 알림 빼고는 삭제 해 주는 것을 추천합니다.

명령어도 실행해 보자

파이어버그의 또 다른 감정은 스크립트의 값을 바로 보고, 함수를 실행해 볼 수 있다는 겁니다.

우선 fileName에 뭐가 들어 있는지 보고 싶다면, 콘솔의 오른쪽 창에 fileName이라고 타이핑을 하고 하단에 있는 실행을 클릭하거나, Ctrl+엔터를 누르면 실행이 됩니다.