웹개발자나 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
자바스크립트를 사용하다 보니 디버깅시 alert으로만 하기에는 너무 고된 길이 예상되어서
fireBug사용법을 검색하여 보았습니다.

역시 구글에 없는 내용은 없더군요^^
아래 사이트에 기본적인 내용이 잘 정리된 것 같습니다.

console.log보기
로그 레벨에 따라 info, debug, error, log중에서 골라서 사용하면 된다.


파이어 폭스에서 이렇게 보임.


코드 실행에 걸리는 시간체크하기
console.time으로 시작을 알리고 테스트 코드를 넣은 후 console.timeEnd()로 닫아준다.
함수단위도 체크가 가능한지 함수 이름을 넣어봤지만 안되더군요.


결과화면


프로파일 명령 사용 코드
while문과 for문을 실행하는 프로파일을 만들어 봤습니다.
console.profile()로 시작하고 마지막에 console.profileEnd()를 사용하면 됩니다.



프로파일 결과
호출 횟수, 시간, 평균시간 등등 코드에 대한 프로파일 분석결과가 화면에 표시됩니다.

크롬에서도 log, profile등은 지원이 되는 것 같더군요.
이 외에도 commandAPI를 이용해 console창에서 돔요소를 탐색하는 기능이 있는데
이 부분은 다음에 기회되면^^

출처 : http://chaospace.tistory.com/
저작자표시 변경금지

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

Prototype에서 jQuery로 옮겨타기  (0) 2011.07.31
Firebug의 console 파헤치기.  (0) 2011.07.19
[jQuery] firebug로 디버그  (0) 2011.07.19
Javascript 배열 메서드  (0) 2011.04.29
[JavaScript] 이미지 파일 첨부시 업로드 이미지 미리보기 (IE8, FireFox3)  (2) 2011.04.23

책 ( jQuery Cookbook ) 을 읽다가 알게된 파이어폭스에서

제대로된 객체가 선택되었는지 확인하는 방법입니다. ㅋㅋ


왠만한 분들 다 아시겠지만;; 전 처음 안거라 신기해서 ㅋㅋ

파이어폭스 사용하여 개발하신 분이라면 다들 아시겠지만,

firebug 라고 디버그 해주는 기능을 다 아시리라 믿습니다~

모르시면
도구 > 부가기능 > 검색 해보시면 나와요~ 설치하시면 디버그 하실 수 있습니다~


이제 중요부분을 말하자면,

상당히 짧아서 서론을 일부러 길게 쓴....

아래는 사용 방법 입니다!~

var $test = $('.test'); // test 라는 클래스 명으로 된 모든 걸 가져옴.
console.log($test); // 파이어폭스 firebug 에 콘솔 이라는 곳에 가져온 test 를 찍습니다.
// 제대로 못 찍으면 잘 못 됐다는 거겠지요?


## 제대로 가져왔을 경우

## 가져오지 못 했을 경우



본인은 제대로 했는데 원활히 수행되지 않거나 에러도 나지 않을 경우에

유용하게 사용할 수 있을 거 같습니다.!!


모르셨던 분들에게 도움이 되셨길!~ ㅋㅋ

다른 것도 아는 것 있으면 공유합시다~~~

방문자가 별로 없어서 널리 퍼지진 않겠지만;;; 쿨럭쿨럭;;



도움이 되셨으면 하단 추천 버튼 혹은 광고 를 눌러주시는 것도 좋습니다.!!
많은 사람들이 볼 수 있도록 해주세요!~~

출처 : http://dokeby.tistory.com/
저작자표시 변경금지

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

Prototype에서 jQuery로 옮겨타기  (0) 2011.07.31
Firebug의 console 파헤치기.  (0) 2011.07.19
fireBug 사용법  (0) 2011.07.19
Javascript 배열 메서드  (0) 2011.04.29
[JavaScript] 이미지 파일 첨부시 업로드 이미지 미리보기 (IE8, FireFox3)  (2) 2011.04.23

+ Recent posts

티스토리툴바