Digital Bohemian | 'firefox extension' 태그의 글 목록
Digital Bohemian 위치로그  |  태그  |  미디어로그  |  방명록
icon firefox extension 에 해당하는 글1 개
2011.01.06   Firebug의 console 파헤치기. (5)


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

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

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



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 


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

test division

결과 : 


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

test division

결과 : 



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

Trace Test



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 


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



결과 : 




저작자 표시
신고

arrow 태그 : , , , ,
arrow 트랙백2 | 댓글5
sangpire 2011.07.07 14:02 신고 L R X
오 정말 정리 잘해 놓으셨네요.
bcnet 2011.09.26 16:36 신고 L R X
저같은 초보 개발자에겐 정말 많은 도움이 되는 자료네요. ^^ 개인 학습용 블로그에 출처기입해서 스크랩 하였습니다.
FS아쿠 2012.06.20 16:56 신고 L R X
좋은글 잘 봤습니다. .저또한 개인 학습 블로그에 출처기입하여 스크랩 하겠습니다.
감사합니다. 2012.11.14 04:41 신고 L R X
좋은 내용이네요. 출처 기입해서 스크랩 하겠습니다.

헤르메스의날개 2014.04.29 16:07 신고 L R X
덕분에 많은 걸 알아갑니다.
감사합니다.

아이디 :
비밀번호 :
홈페이지 :
  비밀글로 등록
내용 :
 



[PREV] [1] [NEXT]
BLOG main image
雜役夫
분류 전체보기 (89)
Mac OSX (2)
Linux (3)
Windows (1)
Database (3)
ASP (6)
PHP (1)
CSS (7)
Javascript (10)
Browser (4)
ASP.NET with C# (2)
Ruby on Rails (3)
FLEX (5)
2008년 (23)
2009년 (7)
2010년 (7)
2011년 (3)
여행 (2)
非常に自転車 超ブレーキ
非常に自転車 超ブレーキ
bp claims
bp claims
http://www.plaxo.com/profile..
http://www.plaxo.com/profile..
http://engageseo.newgrounds...
http://engageseo.newgrounds...
Firebug의 console 파헤치기[..
웹프로그래밍
Total : 96,806
Today : 20
Yesterday : 35
rss
위치로그 : 태그 : 방명록 : 관리자
webkorea's Blog is powered by Daum / Designed by plyfly.net

티스토리 툴바