일단 빠르고 (파폭은 쫌 느림;) 다양한 Extensions이 존재하기 때문인데, 그 중에서도 개발을 위해선 Extionsions 중 firebug를 빼먹을순 없다.
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 href="#" onclick="click();" onmouseover="mouseover();" onmouseout="console.trace();">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--) {
}
return i;
}
function def() {
for (var i = 0; i < 1000; i++) {
}
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>
|
결과 :
Firebug의 console 파헤치기. 
