본문 바로가기

카테고리 없음

크롬에서 console 효과적으로 사용하기 : Become a Javascript Console Power-User (Google developer blog)

    



- XHR 

 개발자도구 콘솔창에서 우클릭을 하고  LogXHLHttpRequests를 체크하면 console 영역에 ajax 호출 내용이 로깅된다. Preserve log upon navigation을 체크하면 페이지 이동해도 log 내역이 남아있게 된다. 


- console.time / timeEnd 

 인자로 객체명을 넣은 채로 실행시키면 time()을 실행한 시점부터 timeEnd()를 실행한 시점까지 걸린 시간을 보여준다. 


- console.dir() / dir()

 해당 객체의 트리뷰(tree view)를 보여준다. 


- $0 / inspect()

 $0 : element 영역에서 엘리먼트를 선택한 후에 $0를 입력하면 해당 엘리먼트가 console 영역에 노출된다. 

 inspect() : 인자로 엘리먼트를 입력하면 element 영역에서 해당 엘리먼트를 찾아주고(인자로 들어간 엘리먼트가 한 개일 때만) console영역에 노출한다. 


- $$

 querySelector로 엘리먼트를 찾는다. 


- monitorEvent

 인자로 엘리먼트를 넘기면 해당 엘리먼트에서 detect되는 event를 log로 노출한다. 두번째 인자로 'key' 나 'mouse'를 입력하면 keyboard 이벤트 혹은 mouse 이벤트만 로그로 노출한다. 


- keys() / values()

 인자로 엘리먼트를 넘겨주면 해당 엘리먼트와 내부에서 사용되는 모든 key값, value값을 노출한다. 


- copy()

 ()안의 내용을 복사해서 ctrl+v 등으로 붙여넣기 할 수 있도록 해준다. 


- in opera : jQuery, // jQuery()

 jQuery를 입력하면 페이지에 jQuery가 로딩되어 있는지 여부를 확인한다. // jQuery()를 입력하면 페이지에 jQuery를 로딩한다. 


- in firefox`s firebug : cd()

 iFrame 등이 페이지에서 쓰일 때 iFrame에 적용된 script는 console에서 사용할 수 없는 경우가 있다. 그럴 때 cd()의 인자로 해당 엘리먼트의 contentWindow 값을 넘겨주면 iFrame 내부에서 사용되는 script를 사용할 수 있다.(context가 바뀜)