알아두면 쓸만한 Chrome Console 기능

 나는 개발할 때 Chrome 개발자도구의 console을 굉장히 자주 사용하는데(대부분의 개발자들이 그럴 것이라 생각한다), 오늘은 크롬 개발자도구의 편리한 기능과 잘 쓰진 않지만 알아두면 좋은 기능들을 한 번 정리해 보고자 한다.

Console Open

• Windows / Linux: Ctrl+Shift+J
• Mac: Cmd+Opt+J
• 개발자 도구가 열린 상태: ESC

Console Clear

• clear() 입력
• Ctrl+L

Log Options

 console 오른쪽 상단위 톱니바퀴를 누르면 옵션을 볼 수 있다. 주로 사용하는 기능은 다음과 같다.

• Hide network: 404 또는 500 오류 등은 보여주지 않는다.
• Log XMLHttpRequst: XML Request를 기록
• Preserve log: refresh나 탐색하는 동안 log기록을 유지
• Show timestamps: log행 마다 timestamp를 보여 준다.

그룹화하여 console message 출력하기

 console.group(),  console.groupEnd() 명령어를 사용하면 메세지들을 그룹화 하여 보여줄 수 있다. 또한 이 그룹들은 중첩도 가능하다. 또 그룹이 축소된 상태로 보이게 하고 싶다면 console.group()대신 console.Collapsed()를 사용할 수도 있다.

특정 상황에서만 console message 출력하기

 console.assert()를 사용하면 첫번째 매개변수가 false일때만 두번째 매개변수를 출력한다.

CSS로 출력 스타일 변경하기

 %c와 css style을 이용하면 출력되는 색이나 글자 크기를 바꿀 수 있다.

DOM Element를 Javascript 객체로 나타내기

 console로 DOM Element를 출력해보면 보통 다음과 같이 HTML 형식으로 표현되는 것을 볼 수 있다.

 그러나 개발하다보면 해당 element의 속성을 보고싶은 경우가 있는데 이때 console.dir()를 사용하면 해당 element를 javascript객체로 표현해준다.

객체 정보를 표로 보기

 object나 배열을 console.table()을 사용하면 표로 볼 수 있다.

실행 시간 측정 하기

 console.time()과 console.timeEnd()를 사용하면 실행하는데 걸린 시간을 표시해준다. 따로 new Date() 함수등을 사용할 필요가 없어 편리하다.

$_

 $_를 사용하면 가장 마지막으로 사용했던 selector나 평가식을 반환하다.

Shortcut Selector

 console에서 DOM Element를 선택할때 단축 선택자를 사용할 수 있다. 단축 선택자는 세 종류가 있다.

• $(): 일치하는 첫 번째 요소를 반환, document.querySelector()와 같다.
• $$(): 일치하는 모든 요소의 배열을 반환, document.querySelectorAll()과 같다.
• $x(): Xpath와 일치하는 요소의 배열을 반환한다.
• $0-4: console에서는 마지막으로 불러왔던 요소 5개를 저장해둔다. 가장 최신은 $0, 가장 오래된 항목은 $4이다.

이벤트가 발생 했을 때 콘솔을 출력하고 싶을 때

 monitorEvents(element, eventType)을 사용하면 특정 이벤트가 발생 했을 때 coonsole에 보여줄 수 있다. unmonitorEvents(element)를 사용하면 이벤트 수신을 해제한다. 또 특정 객체에 연결되어있는 eventListener들을 보고싶다면 getEventListeners(element)를 사용하면 된다.

객체를 클립보드에 복사하기

 copy(object)를 사용하면 지정된 객체의 문자열 표현을 클립보드에 복사할 수 있다.

특정 함수가 호출 되었을 때 디버그 실행하기

 debug(function)을 사용하면 해당 함수가 실행되었을때 sources 패널 내부에서 단계적으로 디버그를 할 수 있도록 해준다.

함수에 전달된 인수를 보고 싶을 때

 monitor(function) 함수를 실행하면 지정된 함수가 실행 되었을 때 함수 이름과 인수를 출력해준다.

ES6 Template literals 응용하기

 chrome은 대부분의 ES6 문법을 지원하기 때문에 template literals를 그대로 사용할 수 있는데, console.log와 조합하면 꽤나 편리하게 사용이 가능하다. 특히 문자열과 변수를 함께 사용해야하는 경우 편리하다. 예를 들어보자. 보통 문자열 중간에 변수 값을 표현하려면 다음과 같이 많이 사용한다.

 template literals은 ``(backtick)과 ${object}를 사용하여 표현할 수 있다. 따라서 다음과 같이 console.log()에 다음과 같이 표현할 수 있다.