웹개발자나 FT개발자는 기본적으로 Firefox나 Chrome을 기본 브라우져로 사용하는 경우가 많다.
일단 빠르고 (파폭은 쫌 느림;) 다양한 Extensions이 존재하기 때문인데, 그 중에서도 개발을 위해선 Extionsions 중 firebug를 빼먹을순 없다.

오늘은 강력한 firebug의 기능 중 console에 대해서 자세히 살펴보려 한다.

1. console.log(object[, object, ...])
script내 단순 메세지 출력을 위해 사용.

?
1
2
3
4
5
6
7
8
9
10
<SCRIPT type=text/javascript>
var str = "콘솔 테스트";
var num = 1;
var num1 = 2;
var num2 = 1;
console.log(str);
console.log(num);
console.log("지금 하는건 %s. 번호는 %d", str, num);
</SCRIPT>

결과 :


2. console.debug(object[, object, ...])
console.log()와 동일하나 추가적으로 실행라인이 표시됨.

?
1
2
3
4
5
6
7
8
9
10
<SCRIPT type=text/javascript>
var str = "콘솔 테스트";
var num = 1;
var num1 = 2;
var num2 = 1;
console.debug(str);
console.debug(num);
console.debug("지금 하는건 %s. 번호는 %d", str, num);
</SCRIPT>

결과 :


3. console.info(object[, object, ...])
console.debug()와 동일하고 앞에 Info를 가르키는 아이콘이 출력된다. (배경색 : 시원한 파란색)

?
1
2
3
4
5
6
7
8
9
10
<SCRIPT type=text/javascript>
var str = "콘솔 테스트";
var num = 1;
var num1 = 2;
var num2 = 1;
console.info(str);
console.info(num);
console.info("지금 하는건 %s. 번호는 %d", str, num);
</SCRIPT>

결과 :


4. console.warn(object[, object, ...])
console.debug()와 동일하고 앞에 warning을 가르키는 아이콘이 출력된다. (배경색 : 불안한 노란색)

?
1
2
3
4
5
6
7
8
9
10
<SCRIPT type=text/javascript>
var str = "콘솔 테스트";
var num = 1;
var num1 = 2;
var num2 = 1;
console.warn(str);
console.warn(num);
console.warn("지금 하는건 %s. 번호는 %d", str, num);
</SCRIPT>

결과 :


5. console.error(object[, object, ...])
console.debug()와 동일하고 앞에 error를 가르키는 아이콘이 출력되고 에러난 부분의 메세지가 출력된다. (배경색 : 에러의 빨간색)

?
1
2
3
4
5
6
7
8
9
10
<SCRIPT type=text/javascript>
var str = "콘솔 테스트";
var num = 1;
var num1 = 2;
var num2 = 1;
console.error(str);
console.error("이건 num 변수다.", num);
console.error("지금 하는건 %s. 번호는 %d", str, num);
</SCRIPT>

결과 :


6. console.assert(expression[, object, ...])
조건을 입력하고 출력할 텍스트를 입력하면 해당 조건이 통과하였을경우 Console창에 출력되지 않고 통과하지 못하였을땐 Console에 출력된다.

?
1
2
3
4
5
6
7
8
<SCRIPT type=text/javascript>
var num = 1;
var num1 = 2;
console.assert(num == 2, "num은 2?");
console.assert(num > num1, "num > num1 이건 통과?");
console.assert(num < num1, "num < num1 이건 통과?");
</SCRIPT>

결과 :


7. console.dir(object)
인자로 넘어간 개체에 대해 모든 프로퍼티와 값들을 출력한다. (HTML 마크업을 넘기면 Dom Tree 출력)

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<DIV id=division class=division>
test division
</DIV>
<SCRIPT type=text/javascript>
console.dir(document.getElementById("division"));
var objGirl = {
Name: "Test",
Eyes: "Brown",
BestQualities:
[
"Smile",
"Laugh"
]
};
console.dir(objGirl);
</SCRIPT>

결과 :


8. console.dirxml(node)
인자로 넘어온 노드에 대한 소스(innerHTML)를 출력한다.

?
1
2
3
4
5
6
7
<DIV id=division class=division>
test division
</DIV>
<SCRIPT type=text/javascript>
console.dirxml(document.getElementById("division"));
</SCRIPT>

결과 :



9. console.trace()
자바스크립트가 최초 실행된 순간부터 console.trace를 만날때까지의 실행 정보를 출력한다.

?
1
2
3
4
5
6
7
8
9
10
<A onmouseover=mouseover(); onmouseout=console.trace(); onclick=click(); href="#">Trace Test</A>
<SCRIPT type=text/javascript>
function click() {
console.trace();
}
function mouseover() {
console.trace();
}
</SCRIPT>

결과 :


10. console.group(object[, object, ...]), console.groupEnd()
그룹을 생성하여 그룹별로 log를 출력할수 있게 해준다. groupEnd는 group()을 열어줬으면 반드시 닫아주는 코드도 삽입해야한다.
그리고 console.groupCollapsed()는 group()과 기능은 동일하나 Default가 접혀있는 상태이다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<SCRIPT type=text/javascript>
var str = "콘솔 테스트";
console.group("기본적으로 펼쳐짐!!");
console.log(str);
console.log("console");
console.warn("warning");
console.groupEnd();
console.groupCollapsed("기본적으로 접혀짐!!");
console.log(str);
console.log("console");
console.warn("warning");
console.groupEnd();
</SCRIPT>

결과 :


11. console.time(name), console.timeEnd(name)
실행 시간을 체크하길 원하는 function이나 구문을 감싸면 실행 시간을 출력해준다.
console.time()을 열었으면 반드시 console.timeEnd()로 닫아줘야 한다.

?
1
2
3
4
5
6
7
8
9
10
<SCRIPT type=text/javascript>
console.time("while test");
var i = 100000;
while (i--){
if( 100 > i ) {
}
}
console.timeEnd("while test");
</SCRIPT>

결과 :


12. console.profile([title]), console.profileEnd()
자바스크립트 프로파일러를 실행한다. profile()로 연 순간부터 profileEnd()를 만날때까지 실행한 모든 스크립팅에 대한 시간(고유시간, 시간, 평균, 최소, 최대)와 호출횟수, 전체 실행 평균 퍼센트를 출력한다. console.profile()을 열었으면 반드시 console.profileEnd()로 닫아줘야한다.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<SCRIPT type=text/javascript>
console.profile("profile test");
function abc() {
var i = 1000;
while (i--) {
//block
}
return i;
}
function def() {
for (var i = 0; i < 1000; i++) {
//block
}
return i;
}
abc();
def();
console.profileEnd();
</SCRIPT>

결과 :


13. console.count([title])
실행한 횟수 만큼 count를 집계하여 출력해준다. 이때 title이 동일하다면 title별로 count를 더하여 보여준다.

?
1
2
3
4
5
6
7
8
<SCRIPT type=text/javascript>
console.count("난 실행될때마다 Count증가. 그래서 Count는?");
var i = 1000;
while (i--) {
console.count("여기 Count는?");
}
console.count("난 실행될때마다 Count증가. 그래서 Count는?");
</SCRIPT>

결과 :


14. console.exception(error-object[, object, ...])
try ~ catch에서 catch의 error 객체를 인자로 넘기면 에러 메세지를 자세히 출력해준다.

?
1
2
3
4
5
6
7
8
9
10
11
12
<SCRIPT type=text/javascript>
function zzz() {
try {
var a = 0;
var c = b * 10;
}
catch (e) {
console.exception(e);
}
}
zzz();
</SCRIPT>

결과 :


15. console.table(data[, columns])
Array나 Object등 형태의 가공된 데이터를 table 형태로 출력해준다.

?
1
2
3
4
5
6
7
8
9
10
11
<SCRIPT type=text/javascript>
var arr = [1, 2,3 ];
console.table(arr);
var obj = [
{city:"서울", eng:"Seoul"},
{city:"제주", eng:"Jeju"},
{city:"부산", eng:"Busan"}
];
console.table(obj);
</SCRIPT>

결과 :

저작자표시 변경금지

'Dev > Javascript' 카테고리의 다른 글

20 Best jQuery Slideshow / Photo Gallery Plugins  (0) 2012.02.29
Prototype에서 jQuery로 옮겨타기  (0) 2011.07.31
fireBug 사용법  (0) 2011.07.19
[jQuery] firebug로 디버그  (0) 2011.07.19
Javascript 배열 메서드  (0) 2011.04.29

+ Recent posts

티스토리툴바