블로그 이미지
ssun++

카테고리

[전체] (73)
Android (7)
JavaScript (9)
CI (5)
Language (14)
ETC (38)
Total324,763
Today0
Yesterday2
[들어가기전]
지난 포스팅에서 Inspector의 'Script' 탭에서 디버깅하는 방법을 살펴보았습니다.
이번에는 'Console' 탭을 이용해서 디버깅하는 방법을 간단하게 확인할 예정입니다.

[console object]
크롬(&사파리)에서는 javascript에서 console이라는 object를 사용할 수 있습니다.
 console object는 아래와 같은 method를 가지고 있으며, Inspector의 Console 탭에 로그를 출력합니다.


1. debug() / info() / log() : 단순 출력
method 이름은 다르지만 내부적으로 동일한 동작을 합니다.
코드 : console.debug("debug입니다");


2. warn() : 단순 출력

코드 : console.warn("warn입니다");


3. error() : 단순 출력

코드 : console.error("error입니다");


4. dir() : object의 정보 출력
코드 : console.dir(new Car());

Car 정의




5. dirxml() : element의 정보 출력
아래 캡쳐보다 많은 항목들이 출력됩니다.
코드 : console.dirxml(document.getElementById("myDiv"));


6. trace() : 호출시의 콜스택 출력
코드 : onload()함수 -> callTrace()함수 -> console.trace() 호출


7. assert() : 조건이 false인 경우 로그 출력(error()와 같은 level)
코드 : console.assert(0>1);


8. count() : 해당코드를 호출한 횟수를 출력
코드 : console.count("카운트"); // for 문으로 3회반복


9. profile() / profileEnd() : Time Profile 생성 (Pair 호출)
"Profile XX" 텍스트를 클릭하면 구간에 대한 profile을 확인할 수 있습니다.
코드 : console.profile(); /* 코드 */ console.profileEnd();


10. time() / timeEnd() : 시간 측정 (Pair 호출)
time() 호출시 출력내용은 없고, timeEnd() 호출시 측정값이 출력됩니다.
코드 : time(); /* 코드 */ timeEnd();


11. group() / groupCollapsed() / groupEnd() : 출력내용 묶음 (Pair 호출)
group() 또는 groupCollapsed()와 groupEnd() pair 호출입니다. (하위항목 펼침/접음)
코드 : group("groupA"); /* 코드 */ groupEnd();

코드 : groupCollapsed("groupB"); /* 코드 */ groupEnd();


12. markTimeline()
정체불명. 아시는 분 있으시면 가르쳐주세요.

[마침]
'Scripts' 탭에서는 코드 실행중의 흐름 제어가 가능했다면
'Console' 탭에서는 원하는 내용의 출력을 통해서 동작을 확인할 수 있습니다.
필요에 따라서 적절하게 사용하면 될 것 같습니다. 
Posted by ssun++

댓글을 달아 주세요

최근에 달린 댓글

최근에 받은 트랙백

글 보관함