javascript 디버깅

자바스크립트에서는 저것을 하기 위해서 일반적으로 개발하면서는 alert() 을 많이 사용한다.
근데 콘솔창을 통해서 로그를 찍는 메소드가 있다는걸 알고 있는가?

console 이라는 객체인데

익스플로어, 파이어폭스, 사파리, 크롬, 오페라에서 사용가능한 기능이다.

[사용방법]

console.log("로그 내용");

 

이렇게 작성하면 console 창에 메시지가 찍힌다. 

 

 ※ 각 브라우저별 콘솔창 활성화 방법 : http://blog.naver.com/loudon23/30088663513

 주의! 

 한가지 알아 둘 점은 IE의 경우 개발자툴(콘솔창)이 활성화 안되어 있으면 아래와 같이 스크립트 오류가 뜬다. 

  

console.log() 에 들어가는 인자는 다음과 같은 형식도 된다

console.log("변수 a=", a, "변수 b=", b);          // , 로 구분 한 출력 방법   console.log("변수 a=%d, 변수 b=%s", a, b);   // printf 같은 출력 방법

 
console출력 방법은 console.log() 만 있는것이 아니다.  아래 같은 형태도 존재한다. 



[다른 출력방법]

1. info 레벨의 로그 출력

    info()는 info 레벨의 로그를 출력한다. log() 명령과 마찬가지로 , 단위로 인자를 넘기거나 printf 방식으로도 출력 가능하다.
    log4j를 사용해본 분은 로그 레벨이라는 것을 알텐데 그거랑 비슷하다 보면 될까?? 
    암튼.. info()로 출력하면 각 브라우저에서는 아래와 같이 출력된다.

    

   
2. warn 레벨의 로그 출력  

    console.warn()도 info()랑 사용법이 같다. 단지 콘솔창에 표현방법이 다를 뿐이다.

    콘솔 창에 찍히는거 보면 느낌표(!)가  붙어서 나오게 된다. 아래 브라우저별로 이렇게 나온다.

    

3. error 레벨의 로그 출력

    error()는 앞에서 설명한 info(), warn() 과 비슷하다. 근데 앞에 나오는 아이콘이 다르다.

    각 브라우저별로 아래처럼 출력된다.

4. assert 방식의 로그 출력

    assert()는 아마 프로그램 해본사람들은 어디선거 봤을 것이다. C나 Java에서 등장하기 때문이다.

    assert()은 조건식의 내용이 거짓(false)이면 로그내용을 출력하는 것이다.

    예를 들어 아래같은 코드가 있다면..

    

var x = 1, y = 1;    console.assert(x==y, "ASSERT 1 : x = " + x + ", y = " + y);    y = 2;    console.assert(x==y, "ASSERT 2 : x = " + x + ", y = " + y);

  아래 처럼 출력된다.     단. 모든 브라우저에 다 구현되어 있지는 않다. 오페라는 아직 구현되어 있지가 않다.

 

5. console 로그 지우기인 clear()

     

console.clear();

 이건 간단하다. 콘솔창의 로그 내용을 모두 지우는 역할을 한다. 

   

 

예전의 자바스크립트 보다 갈수록 개발자 도구들을 브라우저 단에서도 잘 지원해주고, 디버깅 툴들도 좋아지고있다.

그만큼 자바스크립트 쪽이 좋아지고 있다는 뜻이 아닐까??

 

관련자료 : http://msdn.microsoft.com/en-us/library/dd565625(v=VS.85).aspx

[출처] 자바스크립트 디버깅 - 콘솔에 로그 찍기|작성자 루든

자료 출처: http://blog.naver.com/loudon23/30088238327