언어를 막론하고 프로그래머들이 가장 먼저 작성하는 프로그램은 'Hello World'다. 화면에 'Hello World'를 찍어보면서 동작하는 무언가를 처음 만들어 보는 것인데 사실 가장 원초적인 디버깅 방법을 배운거라 생각한다.
브라우저에서 동작하는 자바스크립트(Javascript)언어 역시 'Hello World'를 콘솔에 찍어 볼 수 있는 기능을 제공한다.
console 출력
자바스크립트 코드를 실행 할 수 있는 웹 브라우저(크롬, IE, 사파리, 오페라)들은 console 객체를 지원한다. 각 브라우저의 개발자 도구를 이용하면 현재 페이지의 자바스크립트 코드가 console 객체를 이용해 출력한 결과물을 확인할 수 있다.
크롬의 경우 [F12] 키를 누르면 개발자 도구를 사용하기 위한 창이 열린다. 이 곳에서 'Console' 탭을 선택하면 콘솔을 사용할 수 있다.
console 객체는 간단한 문자열 출력뿐만 아니라 몇 가지 유용한 기능의 메소드를 제공하고 있어 디버깅에 필요한 정보를 효과적으로 콘솔에 출력할 수 있게 해준다.
브라우저별 개발자 도구 활성화
크롬(Chrome)과 IE8 이상 브라우저는 기본적으로 개발자 도구가 함께 제공된다. 별도의 설정 변경없이 개발자 도구를 사용할 수 있다. 하지만 사파리(Safari) 브라우저와 파이어폭스(Firefox) 브라우저는 별도의 설정을 해줘야 개발자 도구를 사용할 수 있다.
우선 사파리 브라우저의 경우 기본적으로 개발자 도구가 비활성화 되어 있다. MacOS의 경우 [환경설정] - [고급] 탭을 들어간다. (윈도우는 [기본설정] - [고급] 탭을 들어가보자.)
하단에 "메뉴 막대에서 개발자용 메뉴보기"라는 체크박스를 볼 수 있다. 클릭해준다.
그러면 상단에 "개발자용"이라는 메뉴가 새로 생긴다.
그 메뉴중에 "JavaScript 콘솔 표시" 메뉴를 선택하면,
페이지 하단에 콘솔을 이용할 수 있는 개발자 도구창이 열리게 된다.
파이어폭스(Firefox) 브라우저의 경우 "Firebug" 플러그인을 설치해야한다. getfirebug.com에서 플러그인을 다운받아 설치하면 [F12] 버튼을 눌러서 콘솔창을 활성화 할 수 있다.
console.log(), console.info(), console.warn(), console.error()
가장 기본적으로 콘솔에 메시지를 찍기 위해서는 console.log()를 이용하면 된다. C언어의 printf()처럼 생각하면 된다.
console.log()에 출력하고 싶은 메시지를 입력하면 콘솔에 입력한 메시지가 출력된다. 위 화면은 "console.log('Hello World')"를 입력한 결과다.
기본적으로는 console.log()를 이용해서 메시지를 찍으면 된다. 하지만 '로그레벨'을 고려하고 싶다면, log() 대신 info(), warn(), error() 메소드를 사용하면 된다. 이 메소드들은 콘솔에 메시지를 출력한다는 점은 동일하다. 하지만 출력되는 메시지 앞에 붙는 아이콘이 다르다.
간단하게 몇 줄의 메시지만 출력한다면 console.log()로 족하다. 하지만 복잡한 코드가 수행되면서 발생하는 다양한 메시지들 중에 치명적이거나 중요한 로그를 한눈에 알아보고 싶다면 console.info(), console.warn(), console.error() 메소드를 섞어서 사용하면 된다.
console.log() 포매팅
C언어의 Formatted String 출력처럼 console.log()류의 메시지 출력 메소드도 문자열 포매팅을 지원한다. 우선 자바스크립트 객체를 다음과 같이 사용할 수 있다.
console.log("obj=", obj);
이런식으로 사용하면, "obj=" 문자열이 출력되고, obj 객체의 toString() 메소드의 리턴 값을 뒤에 붙여서 출력해준다.
console.log("count is %d", count)
이와 같이 count 변수의 값을 십진수 형태의 문자열로 포매팅해준다.
console.count()
console.count() 메소드는 인자로 받은 값이 몇 번 호출되었는지를 출력해준다. 다음 자바스크립트 코드를 보자.
function method(name) {
console.count()
console.log(name)
}
method("Dave")
method("Kim")
method("Han")
이 코드를 실행하면 다음과 같은 console 출력 결과를 얻을 수 있다.
console.count() 메소드에 인자를 주지 않으면 console.count() 메소드가 몇 번 호출되었는지를 출력한다. ('default'를 입력한 것처럼 동작한다.)
인자를 준 경우 인자 값과 동일한게 몇 번 호출되었는지를 출력해준다. 다음 코드를 보자.
function method(name) {
console.count(name)
}
method("Dave")
method("Kim")
method("Dave")
method("Han")
method("Dave")
method("Kim")
이 코드를 실행하면 다음과 같은 콘솔 출력을 얻게 된다.
console.table()
배열이나 객체를 이용해서 데이터를 다룰 때, 배열 혹은 객체에 들어있는 전체 데이터를 출력하고 싶은 경우가 있다. 이 경우 메소드를 console.table() 메소드를 이용해서 예쁘게 콘솔로 출력할 수 있다.
const students = ["Dave", "Kim", "Han"]
console.table(students)
출력결과는 다음과 같다.
객체에 대해서도 동일하게 적용할 수 있다.
const student = {
name : "Dave",
address : "Seoul"
}
console.table(student)
출력결과는 다음과 같다.
두 개 이상의 객체들을 하나의 테이블로 출력 할 수도 있다. 이럴 때는 객체들을 배열로 래핑(Wrapping)해서 console.table() 메소드로 넣어주면 된다.
const student = {
name : "Dave",
address : "Seoul"
}
const tutor = {
name : "Song",
address : "SeongNam"
}
console.table([student, tutor])
출력결과는 다음과 같다.
console.group(), console.groupEnd(), console.groupCollapsed()
콘솔에 출력되는 메시지들을 그루핑(Grouping)해서 보기 좋게 만들 수도 있다. 관련된 여러줄의 메시지들을 하나의 그룹으로 만들어서 접기/펼치기로 볼 수 있으면 로그를 읽기에 훨씬 수월하다.
console.group() 이 호출될 때마다 새로운 그룹이 만들어지고, console.groupEnd()를 호출하면 현 레벨의 그룹이 종료된다. 그룹 스택에 추가하고 pop 하는 동작을 생각하면 된다.
console.log("level1 log");
console.log("level1 log");
console.group();
console.log("level2 log");
console.log("level2 log");
console.group();
console.log("level3 log");
console.log("level3 log");
console.groupEnd();
console.log("level2 log");
console.groupEnd();
console.log("level1 log");
출력결과는 다음과 같다.
console.groupCollapsed()로 그룹을 열면 접힌 상태로 콘솔에 출력되는 것만 다르고 console.group() 메소드와 동일하다.
댓글