[Chrome] 개발자도구 콘솔 팁

콘솔에서 selector 사용

// SELECTOR에 해당하는 element 하나만 가져오기 == document.querySelector
$(SELECTOR)
// ex)
$('tagName')
$('.className')
$('#id')
 
// SELECTOR에 해당하는 element 전부 가져오기 == document.querySelectorAll
$$(SELECTOR)

웹페이지를 웹에디터 형태로 수정하기

// 콘솔에서 document.body.contentEditable = true 라고 입력하면 페이지가 웹에디터 형태로 변하면서 모든 DOM element를 마음껏 수정가능
// 중단하고 싶을 땐 document.body.contentEditable = false

DOM element에 걸린 Event Listener 가져오기

getEventListeners($(SELECTOR))
// ex) 클릭이벤트의 첫번째 event listener = getEventListeners($('#id')).click[0].listener

이벤트 모니터링

// 이벤트 전부 모니터링
monitorEvents($(SELECTOR));
 
// 특정 이벤트 하나만 모니터링
monitorEvents($(SELECTOR), 'eventName');
 
// 이벤트 여러개 모니터링
monitorEvents($(SELECTOR), ['eventName1', 'eventName2']);
// 특정 이벤트 여러개 모니터링은 이벤트 이름의 일부를 넘기면 가능
// 예를 들어 아래와 같이 할 경우 mouse에 관련된 mouseover, mousemove 등 모든 이벤트 모니터링
monitorEvents($(SELECTOR), 'mouse');
 
// 모니터링 중지
unmonitorEvents($(SELECTOR));

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

inspect($(SELECTOR))

직전 결과값 가져오기

// $_ 를 이용해 직전 결과값을 가져올 수 있음
 
// console 탭에서 아래처럼 해보면 확인 가능
2 + 3 + 4
9
 
$_
9

콘솔 & 메모리 날리기

clear()
// 단축키는 ctrl + L

함수명으로 함수 시작부분에 break point 걸기

/*
console 탭에서 debug(함수명) 입력하면 해당 함수의 시작부분에 break point를 걸어줌
이 상태에서 해당 함수가 호출되면 소스코드상의 함수선언부에 break가 걸린 상태로 Sources 탭으로 넘어감
함수 이름만 알고 어디에 정의되어 있는지 모를 경우에도 유용함
해제는 undebug(함수명)
*/

함수 호출시 매개변수 출력

/*
console 탭에서 monitor(함수명) 입력하면 해당 함수가 호출될 때 매개변수만 console 창에 출력해줌
함수 매개변수 디버깅한다고 함수 시작부분에 console.log(args) 찍는걸 완벽히 대체가능
해제는 unmonitor(함수명)
*/