자바스크립트 디버깅 console.log

출처 : http://deadfire.hihome.com/jscript/projscript003.html

2.1 console 객체 (자바스크립트 디버깅)

  기존에 자바스크립트 코드를 디버깅하는 가장 단순한 방법은 바로 alert()을 사용하여 필요한 정보를 찍어보는 것이었다. 

  alert()을 사용하는 방법은 훌륭하진 않지만, 간단히 사용할 수 있는 꽤 쓸만한 디버깅 방법이다. 다만, 일일이 확인 버튼을 클릭해 주는 일은 불편했던 것이 사실이다. 가끔 for루틴 안에 alert()을 넣고 돌리는 황당한 경험을 한두번씩 했을 것이다.

  경험상, 디버깅시에 로그파일에 필요한 정보를 기록하게 되면 디버깅이 훨씬 쉬워진다. 여타 프로그래밍 언어들은 이러한 기능들을 지원하고 있다. 그 개념을 브라우저에서 실행되는 자바스크립를 위해 지원하는 것이 바로 console객체다.

  console객체는 IE8 이상 버전과 사파리, 크롬, 오페라같은 최신 브라우저에서 사용할 수 있다. 먼저 간단한 사용 예를 보자.

view plainprint?

1. var str = "test 입니다";  
2.   
3. console.log(str);  

  위와 같이 작성하면, str의 값을 로그로 찍어주는데, 기본 브라우저화면에서는 그 내용을 볼 수 없다. 별도의 개발자도구를 띄워야만 로그를 확인할 수 있다. IE나 크롬, 파이어폭스는 F12번을 누르면 나타나는 개발자도구에서 [콘솔] 메뉴를 클릭하면 로그를 볼수 있다.

 브라우저별 추가설정
  크롬과 IE8 이상에서는 기본적으로 개발자도구가 설치되어 있어서 바로 사용이 가능하다. 그러나 사파리와 파이어폭스의 경우는 추가로 설정을 해줘야만 개발자도구를 사용할 수 있다. 

  먼저 사파리의 경우는 설정메뉴(URL창 오른쪽 기어모양아이콘)을 누른뒤, [기본설정] - [고급]탭의 하단에 있는 "메뉴막대에서 개발자용 메뉴보기"를 선택하고 저장하면 메뉴에 "개발자용"이 생성되고 해당 메뉴의 오류콘솔보기를 통해서 콘솔을 볼수 있게 된다.

  파이어폭스는 "Firebug" 플러그 인을 깔아야 한다. getfirebug.com 사이트에서 다운받아 설치하면, F12버튼을 통해서 개발자도구를 사용할 수 있게 된다.

  다음은 위의 코드를 실행한 결과를 크롬의 개발자도구(왼쪽)와 IE9 (오른쪽)를 통해서 본 모습니다.

 IE8 및 그 이하버전
  console.log()를 사용할 때, IE8 버전의 경우 개발자도구가 열려있지 않으면 에러가 발생하고, 그 이하 버전(IE6, IE7)의 경우는 아예 console을 지원하지 않기 때문에 에러가 나게 된다. 이러한 상황을 방지할려면, 다음과 같은 코드를 상단에 추가해 주면 에러가 나는 상황을 방지할 수 있다.

var console = window.console || { log: function() {} };

  * console객체는 현재 ECMAScript 표준에 속한 부분은 아니지만, 사실상 표준으로서 모든 브라우저들이 이를 구현하고 있다.

2.2 console 로그 레벨

  console의 메소드 중에서 가장 유명한 것이 console.log() 지만, 실제로는 10여개의 메소드들이 존재한다. (다만, 모든 브라우저가 제공하지 않는 기능들도 있기 때문에 사용할 때는 항상 확인해보는 것이 좋다.)

  로그를 기록하는데 주로 사용되기 때문에 로그등급에 따라서 로그 정보를 출력하는 메소드들이 존재하며, 출력시 아래와 같이 아이콘이 출력된다. (다음은 크롬에서 출력된 결과이다. console.debug()라는 메소드도 있었는데, 현재는 deprecated 상태로 대신 log를 사용하도록 권장하고 있다.)

view plainprint? console.log("Log 정보");     console.info("Info 정보");          console.warn("Warn 정보");       console.error("Error 정보");

  위와 같이 로그등급별 메소드들 간에 특별한 차이가 존재하지는 않는다. 다만, 콘솔 앞에 에러 등급에 따른 아이콘 표시유무가 다르기 때문에 브라우저 호환등을 고려해보면 간단히 console.log()만 사용하는 것도 좋은 방법이다.

2.3 console.log() 인자

  console.log()는 다음과 같이 두가지 방식으로 사용된다. 

console.log(obj1 [, obj2, ..., objN]);	ex) console.log("a = ", a, ", b = ", b);
console.log(msg [, subst1, ..., substN]);	ex) console.log(" a is [%d], b is [%s]", a, b);

  첫번째 방식은 일반적으로 객체의 toString()을 호출하여 문자열 합치기로 표현되며, 두번째 방식은 C언어의 printf()함수에서 제공되는 format문자열로 출력할 수 있는 방법(치환문자열, Substitution string)을 제공하고 있다.

  치환 문자열로 사용할 수 있는 값들은 다음과 같다. 

%o	Javascript Object HypterLink  (아래예제와 같이 해당 객체 정보를 훓어볼수 있는 링크를 제공해준다.)
%d	Integer
%i	Integer
%s	String
%f	Floating-point

  다음과 같이 출력하는 대상이 객체인 경우는 더욱 쓸만하다. 객체를 console.log의 인자로 넘겨주게 되면, 크롬의 경우는 해당 객체의 모든 값을 다 확인할 수 있다. (브라우저의 도구마다 출력결과는 다르다. IE9은 달랑 [object Object]만 출력하고 만다.)

view plainprint? var car = {       color: 'red',       speed: 100,       go: function(){ alert('Go'); },       stop: function(){ alert('Stop'); }   };     console.log(car);

  console.log("로그 : "+car)로 하게 되면 위와 같이 출력되지 않고, 문자열 합치기가 되어 객체정보를 확인할 수 없으므로, 객체 정보를 제대로 확인하고 싶다면, 반드시 console.log("로그 : ", car)와 같이 쉼표로 구분해 주는 방식으로 사용하는 것이 좋다.