크롬 콘솔에서 디버깅하기

크롬 개발자도구 콘솔을 사용하여 다양한 디버깅 방법을 알아보자.

# 콘솔 키기

크롬 개발자도구를 키고 Console 탭이 아닌 경우에 단축키인 ESC를 클릭하면 개발자도구 아래쪽에 console drawer이 나타난다. 

개발자도구 상단 쪽 X 버튼 왼쪽에 있는 점 세개를 누르면 show console drawer을 눌러도 된다.

 

상단 탭에서 Console 탭을 찾아서 클릭하면 다음과 같이 콘솔이 나타난다. 크게 보려면 탭을 찾아서 키면 된다.

 

# expression을 모니터링하기

실시간으로 현재 viewport의 active element를 보고 싶다면 어떻게 해야할까? 

위 버튼을 누르면 아래 처럼 입력할 수 있는 창이 나타난다. 여기에 document.activeElement를 입려한 후 엔터를 치면 active element를 실시간으로 업데이트 해준다. viewport에서 클릭을 하는 것에 따라 값이 바뀌는 것을 알 수 있다. 다른 디버거처럼 expression을 입력해두면 된다.

 

# window, document 객체에 접근하기

콘솔에 window.alert('1')을 실행하면 다음과 같은 화면이 나타난다. 콘솔에서는 window나 document 객체에 접근할 수 있다. 

 

# 콘솔 로그 필터링하기

콘솔에 로그가 많을 경우 원하는 로그를 찾기 위해 필터링 기능이 있다. 정규표현식도 가능하다.

 

# Select JavaScript context

로그가 찍히는 컨텍스트를 결정할 수 있다. top은 모든 컨텍스트를 다 포함하여 로그를 찍어줄 것이다. 선택이 필요한 컨텍스트가 있다면 이를 활용하면 좋다.

 

# Console API 

콘솔에서 console. 까지 써보면 사용 가능한 api가 나온다. log, trace, debug 등 유용한 api가 많으니 활용하면 좋다. 

console.log()는 콘솔에 로그를 남겨준다. trace는 디버깅 도중 사용할 수 있는데 콜스택을 콘솔에 프린트해준다.

developer.chrome.com/docs/devtools/console/api/

# Console Utilities API reference

console utilities api는 오직 크롬 개발자도구에서만 사용할 수 있으니 크롬 개발자도구에서만 사용해야 한다.

콘솔에 $_ 까지 쓰고 엔터를 눌러 실행하자. undefined가 나오거나 값이 출력될 것이다. 가장 최근에 평가된 식을 보여준다.

콘솔에 1+1 을 실행한 후 $_ 를 다시 확인해보면 2가 나오는 것을 확인할 수 있다.

$0 은 현재 선택된 노드 정보를 가지고 있고 $1, $2, $3, $4 순으로 최근 선택되었던 노드에 대한 값을 가지고 있다.

debug(function) 은 이것을 사용하면 해당 함수가 호출될 때 시작 라인에서 breakpoint가 걸린다. undebug(function) 으로 풀 수 있다.

monitor(function) 을 하면 해당 함수가 호출될 때 로그를 남겨준다. unmonitor(function)으로 해제할 수 있다.

이외에도 다양한 api가 있다.

developer.chrome.com/docs/devtools/console/utilities/

 

참고

developer.chrome.com/docs/devtools/console/reference/

stackoverflow.com/questions/44130085/filter-the-chrome-console-messages