자바스크립트 학습 게시판입니다.
글 등록하기 | 내글 관리하기 | 연재글 | 보관함
첨부파일 https://eond.com/javascript/361318

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

 

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

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

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

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

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

  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를 사용하도록 권장하고 있다.)

  1. console.log("Log 정보");    
  2. console.info("Info 정보");      
  3.   
  4. console.warn("Warn 정보");      
  5. 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]만 출력하고 만다.)

  1. var car = {  
  2.     color: 'red',  
  3.     speed: 100,  
  4.     go: function(){ alert('Go'); },  
  5.     stop: function(){ alert('Stop'); }  
  6. };    
  7. console.log(car);  
 

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

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 79 articles in 3 / 4 pages
번호 제목 제목 글쓴이 글쓴이 날짜날짜 조회 수
공지 자바스크립트 관련 유용한 링크 모음집 (러닝은빛) 파일 이온디 2015/08/27 473
공지 자바스크립트 추천 사이트 [1] 이온디 2015/08/06 355
38 [라이브러리] 데이터를 처리할 때 유용한 6가지 자바스크립트 라이브러리(Sharon Machlis | Computerworld, 2013) 이온디 2015/08/28 97
37 [고급팁] ‘제다이급’ 자바스크립트 고수들이 전하는 6가지 개발팁 (Jonathan Freeman | InfoWorld, 2013) 이온디 2015/08/28 90
36 [문제] onMouseout과 setTimeout 사용법 이온디 2015/08/28 101
35 [고급팁] 자바스크립트 this 이온디 2015/08/26 222
34 [고급팁] 자바스크립트 클로져(Closures) 심화 파일 이온디 2015/08/26 105
33 [기초] [javascript] for문을 사용한 sum 출력하기 / 싱싱해 서기의 javascript 기초 강좌 #1~7 이온디 2015/08/28 191
32 [포럼] 자바스크립트의 기본적인 특성(러닝은빛) 이온디 2015/08/27 93
31 [팁] 홈페이지에 접속해서 지난 시간 나타내기 이온디 2015/08/27 31
30 [포럼] 자바스크립트 개발을 하기 전에 꼭 한번 읽어 보세요. 이온디 2015/08/27 145
현재글 [팁] 자바스크립트 디버깅 console.log 이온디 2015/08/26 121
28 [팁] 자바스크립트 지역변수, 전역변수의 유효범위 (중요) 이온디 2015/08/26 273
27 [팁] 자바스크립트(JavaScript) 배열(array) sort, splice, push 정렬,추가,수정,삭제 이온디 2015/08/26 827
26 [팁] 자바스크립트 함수 function() 이온디 2015/08/26 63
25 [팁] Function Declarations(함수선언) vs Function Expressions(함수표현) (함수호이스팅 hoisting) 이온디 2015/08/26 86
24 [팁] JavaScript에서 class 정의하기 이온디 2015/08/25 74
23 [팁] 자바스크립트의 모든것 이온디 2015/08/25 561
22 [포럼] 자바스크립트 개념 이온디 2015/08/25 607
21 [포럼] 객체 지향 자바스크립트 이온디 2015/08/25 56
20 [포럼] 자바스크립트 #1 객체지향 흉내내기 이온디 2015/08/25 46

해시태그 디렉터리