본문 바로가기

Language/JavaScript

알아두면 쓸만한 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()에 다음과 같이 표현할 수 있다.


'Language > JavaScript' 카테고리의 다른 글

Higher-Order Function 이란 무엇인가  (0) 2018.10.28
Javascript Iterator  (0) 2018.10.12
알아두면 쓸만한 Chrome Console 기능  (0) 2017.12.31
React v16 무엇이 바뀌었나  (1) 2017.10.08
Currying in Javascript  (0) 2017.07.23
Functional Programming in Javascript  (7) 2017.07.22