FrontendJavascript

[Chrome] Developer Tools Console

,

Chrome 개발자도구 콘솔 명령어

브라우저별 개발자 도구가 계속 발전하고 있어서 웹 개발과 디버깅 시간이 많이 단축되었다.
개발자 도구에 많은 기능 중 유용한 콘솔 API만 몇가지 정리한다.

크롬 개발자 도구 콘솔 팁

1.콘솔에서 selecter 사용이 가능하다.

1
2
// $('tagName'), $('.class'), $('#id')
$$('tagName') #매칭되는 셀렉터 DOM 엘리먼트 전부 반환

2.콘솔에서 document.body.contentEditable=true 를 입력하면 해당영역이 에디터로 변하면서 모든 DOM element 수정이 가능하다.

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

1
2
3
4
5
getEventListeners($('selector'));
getEventListeners($('selector')).click[0].listener #클릭이벤트의 첫번째 이벤트 리스너
getEventListeners($('selector')[0]);
getEventListeners($$('selector')[0]);
getEventListeners($0); #특정 DOM element 이벤트 리스너 (해당 엘리먼트 선택후 콘솔에서 커맨드 입력)

4.이벤트 모니터링
팁) DOM 트리에 특정 element에서 발생하는 이벤트를 추적하는 방법
DOM 트리에 특정 element에서 발생하는 이벤트 추적
http://stackoverflow.com/questions/10213703/how-do-i-view-events-fired-on-an-element-in-chrome-devtools/15923770#15923770

1
2
3
4
monitorEvents($('selector')); #이벤트 전부 모니터링
monitorEvents($('selector'), 'eventName'); #특정 이벤트 하나만 모니터링 
monitorEvents($('selector'), ['eventName1', 'eventName3', ….]); #이벤트 여러개 모니터링 
unmonitorEvents($('selector')); #이벤트  모니터링 중지

5.실행시간 체크

1
2
3
4
5
6
console.time('timer'); #시작
for(var i=0; i < 100000; i++){
  2+4+5;
}
console.timeEnd('timer'); #실행시간 출력 
//Output - timer:12345.00 ms

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

1
2
var myArray = [{a:1,b:2,c:3},{a:1,b:2,c:3,d:4},{k:11,f:22},{a:1,b:2,c:3}]
console.table(myArray);

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

1
2
3
4
5
inpect($('selector'));
inpect($('a')[1]); #2번재 a태그
$0 = 직전에 inspect 했던 element(-1)
$1 = 직전에 inspect 했던 element(-2)
$2, $3...

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

1
dir($('selector'));

9.직전 결과값 가져오기

1
$_ #예를 들어 5 + 5 같은 수식을 콘솔에 적으면 결과값은 키보드 위, 아래를 눌러 보아도 값을 사용할 수 없을 때 사용하면 된다.

10.콘솔 & 메모리 삭제하기

1
clear(); #단축키 ctrl + L

참조

공유하기