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

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

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

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

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

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

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

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

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

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


 

2.2 console 로그 레벨

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

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

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

2.3 console.log() 인자

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

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

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

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

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