크롬 개발자 도구 콘솔 팁

[크롬 개발자 도구 콘솔 팁]

- 간략히 정리

1. 콘솔에서 selector 사용가능

ex) $('tagName'), $('.class'), $('#id'),

$$('tagName') <- selector에 걸리는 DOM elements 전부

2. 콘솔에서 document.body.contentEditable = true 입력하면 웹페이지가 웹에디터로 변하면서 모든 DOM element를 마음껏 수정가능

3. DOM element에 걸린 이벤트 리스너 가져오기

getEventListeners($('#id'))

클릭이벤트의 첫번째 이벤트 리스너 = getEventListeners($('#id')).click[0].listener

4. 이벤트 모니터링

monitorEvents($('selector')) : 이벤트 전부 모니터링

monitorEvents($('selector'), 'eventName') : 특정 이벤트 하나만 모니터링

monitorEvents($('selector'), ['eventName1', 'eventName2', ...]) : 이벤트 여러개 모니터링

unmonitorEvents($('selector')) : 이벤트 모니터링 중지

팁) Dom 트리에 특정 element에서 발생하는 이벤트를 추적하는 방법 .

5. 실행시간 체크

console.time('myTime'); // 시작

어쩌고 저쩌고 실행코드

console.timeEnd('myTime'); // 실행시간 출력

6. 배열/오브젝트 변수값을 테이블 형태로 보기

console.table(aVar);

7. 특정 DOM element inspect (개발자 도구의 Elements 탭으로 바로 이동)

inspect($('selector'))

inspect($('a')[3]) : 4번째 <a> 태그

$0 = 직전에 inspect 했던 element (-1)

$1 = 직전 inspect했던 전의(-_-) element (-2)

$2, $3...

8. 디렉토리 형태로 property 보기

dir($('selector'))

9. 직전 결과값 가져오기

$_ <- 이걸 이용하면 됨

ex) 콘솔에서 아래처럼 확인 가능

2+3+4

10. 콘솔 & 메모리 날리기

clear()

단축키는 ctrl + L

[출처] 크롬 개발자 도구 콘솔 팁 (하드코딩하는사람들) |작성자 야쿠

보물창고