일반적으로 javascript 디버깅시에는 alert()를 주로 사용하게 되지만, alert를 실행 하는 순간 script가 멈추기
때문에 디버깅이 어려운 경우가 있다.
이런 단점을 극복할 수 있는 유용한 Javascript 디버깅 엔진을 소개 한다.

이름하여 blackbird(http://www.gscottolson.com/blackbirdjs/).



사용방법은 압축파일을 풀어서 blackbird.css, blackbird.js, blackbird_panel.png, blackbird_icons.png 파일을 웹폴더에 복사한 후 소스코드 각각 아래 처럼 추가 하고(물론 href 및 src 경로는 본인의 웹폴더 경로로 줘야 한다),

<link type="text/css" rel="Stylesheet" href="/blackbird.css" />
< script type="text/javascript" src="/blackbird.js"></script>

javascript로 다음과 같이 디버깅을 할 수 있다.

log.debug( 'this is a debug message' );
log.info( 'this is an info message' );
log.warn( 'this is a warning message' );
log.error( 'this is an error message' );


* 주의: 여기 까지가 홈페이지에 소개된 내용인데, 사실 이대로 해보면 Javascript 오류가 나면서 동작을 하지 않는다.
반드시 아래와 같이 DTD선언을 해줘야 한다(이것 찾느라 애 먹었음).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">

또한 처음에 디버깅 판넬이 나타나지 않으면 F2를 누르면 된다.


 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<script type="text/javascript">
<!--
    //날짜 유효성검사
    if ( !isValidDate('2014-11-31') ) {
        alert('에러');
 
    } else {
        alert('정상');
    }
     
 
    function isValidDate(param) {
        try
        {
            param = param.replace(/-/g,'');
 
            // 자리수가 맞지않을때
            if( isNaN(param) || param.length!=8 ) {
                return false;
            }
             
            var year = Number(param.substring(0, 4));
            var month = Number(param.substring(4, 6));
            var day = Number(param.substring(6, 8));
 
            var dd = day / 0;
 
             
            if( month<1 || month>12 ) {
                return false;
            }
             
            var maxDaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
            var maxDay = maxDaysInMonth[month-1];
             
            // 윤년 체크
            if( month==2 && ( year%4==0 && year%100!=0 || year%400==0 ) ) {
                maxDay = 29;
            }
             
            if( day<=0 || day>maxDay ) {
                return false;
            }
            return true;
 
        } catch (err) {
            return false;
        }                      
    }
//-->
</script>

+ Recent posts