자바스크립트 디버깅(Debugging) - alert, console

Deburgging - console, alert

이 글에서는 자바스크립트의 디버깅 방법에 대해 정리합니다.

먼저 디버깅의 개념에 대해 알아봅니다.

컴퓨터 분야에서 디버깅이란 컴퓨터 프로그램이나 하드웨어 장치에서 잘못된 부분, 즉 버그를 찾아서 수정하거나 또는 에러를 피해나가는 처리과정입니다.

프로그램이나 하드웨어 장치의 결함을 제거하기 위해서는 문제가 되는 부분을 분리시킨 후 수정해야 합니다. 프로그램이 디버깅되었다거나 프로그램의 결함을 해결하였다는 것은 더 이상의 잘못된 부분이 없다는 것을 의미합니다.

다시말해, 프로그램의 버그를 고치는 일이라고 할 수 있습니다. 

버그는 프로그램의 오동작을 말하는데 긴 프로그램이라도 기본적으론 의심되는 코드부분에 브레이크 포인트를 걸고 조금씩 실행해 보면서 여러 가지 값들이 제대로 나오는지 검사해 보는 것도 좋지만 처음부터 프로그램을 작성할 때 버그를 발견하기 쉽게 짜는 게 더 효율적일 수도 있습니다. 

잘못된 변수가 인수로 넘어오면 리턴 값을 특정한 값으로 한다던가, 아니면 중요한 함수 같은데서 2개 이상의 알고리즘으로 하여서 계산결과를 서로 비교한다던가.. 이러한 디버깅은 오직 연습과 경험이 바탕이 되어야 할 것입니다.

alert

자바스크립트 안에 alert 문을 작성하는 단순한 방법입니다.

이렇게 하면 웹 브라우저를 열 때 alert 대화상자가 표시됩니다. 이른바 print를 이용한 디버깅의 자바스크립트 버전입니다.

이 방법은 어떠한 웹 브라우저에서도 이용할 수 있습니다. 또한 alert 대화상자가 표시되고 있는 도중에는 모든 자바스크립트의 실행이 정지됩니다.

따라서 alert를 대량으로 작성하여 단계적인 실행과 같은 것이 가능해집니다.

단, alert 대화상자(경고창)를 하나하나 닫아야 하므로 그다지 편리한 방법은 아닙니다.

더욱이 실수로 무한 루프 안에서 alert를 실행할 경우 웹 브라우저의 프로세스를 종료시킬 수 없으면 윈도우를 닫을 수 없는 사태에 빠지게 되므로 주의가 필요합니다.

다음의 예제는 toString() 메서드를 오버라이드하면서 문자열을 변경시킨 후 그 문자열을 alert 에 표시하는 코드입니다.

javascript

var StringObject = function (text) {
    this.text = text
};

var strObj = new StringObject('안녕, alert');

alert(strObj); // [object Object] 가 출력된다.

strObj.toString = function () {
    return this.text;
};

alert(strObj); // 안녕, alert 가 출력된다.

console 알아보기

요즘의 웹 브라우저에는 자바스크립트를 실행하기 위한 콘솔 기능이 표준으로 탑재되어 있는 것이 있습니다.

원래는 파이어폭스용 애드온인 파이어버그에 구현돼 있는 기능이었지만 파이어버그를 이용하는 개발자가 많아져서 사파리나 구글 크롬 등에서는 표준으로 콘솔을 탑재하게 되었습니다.

console.log('콘솔 객체를 사용합니다.'); 와 같은 코드를 자바스크립트 안에 작성하면 해당 콘솔에 "콘솔 객체를 사용합니다" 라고 표시됩니다.

alert를 이용하는 경우와 본질적으로는 같지만 console을 이용하는 경우는 하나하나 대화상자를 닫을 필요는 없으므로 alert 보다 사용하기 좋을 것입니다. 

또한 alert 보다도 상세한 데이터를 표시할 수 있습니다.

하지만 인터넷 익스플로러 등 표준에서 console 객체가 존재하지 않는 브라우저(콘솔객체를 탑재하지 않은)에서는 에러가 발생하므로 주의하시기 바랍니다.

더미 console 객체

실제로 console 객체를 사용하는 경우에는 console의 코드를 제거해야 하지만 개발 중에 약간 테스트하고 싶을 경우에 일부로 console 코드를 제거하는 것도 번거로운 일이 될 것입니다.

그래서 인터넷 익스플로러 등의 console 객체가 존재하지 않는 브라우저에서도 에러가 발생하지 않도록 더미 console 객체를 넣는 방법을 이용하기도 합니다.

파이어버그의 console 객체에 포함된 모든 메서드를 제공하는 더미 console 객체는 다음의 아래처럼 작성할 수 있습니다.

이를 최초로 읽는 자바스크립트 코드의 맨 위에 작성해 두면 console 호출로 에러가 생기는 일은 없어질 것입니다.

실제로 릴리지할 때는 console.log 등의 코드와 함께 이 코드도 제거할 수 있도록 해야 합니다.

물론 아래 코드를 남겨둬도 되지만 조금이라도 코드의 양을 줄이고 성능을 향상시키고 싶다면 제거하는 편이 좋을 것입니다.

javascript

if(!window.console) {
    (function(win){

        var names = [
            'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
            'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
            'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
            'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
        ];

        var consoleMock = {};

        for (var i = 0, len = names.length; i < len; i++) {
            consoleMock[names[i]] = function () {};
        }

        win.console = consoleMock;

    })(window);
}

위의 코드는 아래와 같이 작성할 수도 있습니다.

javascript

(function() {
    var method;
    var noop = function () {};
    var methods = [
        'assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error',
        'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log',
        'markTimeline', 'profile', 'profileEnd', 'table', 'time', 'timeEnd',
        'timeline', 'timelineEnd', 'timeStamp', 'trace', 'warn'
    ];
    var length = methods.length;
    var console = (window.console = window.console || {});

    while (length--) {
        method = methods[length];
        console.log(method);
        // Only stub undefined methods.
        if (!console[method]) {
            console[method] = noop;
        }
    }
}());

메시지나 객체를 표시하는 콘솔 메서드

다음의 메서드는 거의 같은 기능을 제공하며, 메시지나 객체를인자로 취해서 그 내용을 콘솔에 출력합니다.

인자는 몇 개라도 지정할 수 있으며, 지정된 인자를 전부 출력합니다.

javascript

console.log();

console.debug();

console.error();

console.warn();

console.info();

기본적으로 log() 메서드만 이용해도 충분합니다.

debug() 메서드를 사용하면 대량으로 console.log() 계열의 메서드를 넣는 경우에 편리하지만 현재는 deprecated(중요도가 떨어져 더 이상 사용되지 않고 앞으로는 사라지게 될) 상태로 대신 log를 사용하도록 권장하고 있습니다.

error(), warm(), info() 에서도 행 번호가 표시되고, debug()와의 차이는 콘솔창에서 표시되는 아이콘이나 문자의 색이 다르거나 할 뿐 그다지 의식해서 사용할 일은 많지 않습니다.

console.dir()

console.dir() 메서드는 인자로 전달된 객체를 덤프해서 보기 쉽게 표시합니다.

console.log() 등으로 출력할 때 보다도 보기 쉽게 출력,표시되지만 한 번에 로그가 길어지므로 다른 로그가 흘러가 버리는 것에 주의해야 합니다.

console.trace()

console.trace() 메서드를 사용하면 그 함수가 어디서부터 호출되는 것인지 표시됩니다.

트리거된 것이 어느 객체의 어느 이벤트인가도 알 수 있습니다.

이벤트 처리 내용을 작성하는 경우에는 어느 함수가 어느 타이밍에 호출되는지 정확히 파악하는 것이 어려울 수 있습니다.

이러한 경우 console.trace() 메서드를 사용하면 호출한 곳의 경로를 알 수 있기 때문에 편리합니다.

console.time(), console.timeEnd()

console.time(), console.timeEnd() 메서드는 시간, 횟수, 성능을 측정합니다.

각 인자에는 사용자가 정의하고 싶은 이름을 지정하면 이때 같은 이름을 지정한 것이 짝이되고 그 사이의 경과 시간이 출력됩니다.

표시되는 시간의 단위는 밀리초입니다.

다음은 콘솔 타임 메서드로 반복문 성능을 체크한 예제입니다.

javascript

console.time('반복문 성능 체크');
for (var i = 0; i < 10; i++) {
    console.log(i);
}
console.timeEnd('반복문 성능 체크');

console.count()

console.count() 메서드를 사용하면 특정 행이 몇 번 실행됐는지를 확인하실 수 있습니다.

다음의 예제를 통해 확인해 보시기 바랍니다.

javascript

for (var i = 0; i < 30; i++) {
   console.count('foo');
    if (i % 10 === 0) {
        console.count('bar');
    }
}

Jaehee's WebClub