크롬 개발자 도구 Console 숨은 기능

공식 문서

https://developer.chrome.com/docs/devtools/console/

Console

• console.log 만이 아니라 console.warn, console.error를 이용해 메시지를 출력하고 필터를 적용하여 개발자 도구에서 확인할 수 있다
• console.table을 이용해서 표 형태로 출력할 수 있다. 속성이 여러 개인 객체의 배열인 경우 유용하다
• console.group: 여러 console 메시지를 묶어서 출력
• console.count: 해당 함수가 몇 번 호출되었는지 출력
• console.time, console.timeEnd: 호출이 시작된 시간과 끝 시간을 출력

관련된 공식 문서

live expressions

반복적으로 찍어보고 있는 값이 있다면 live expression 을 통해 실시간으로 값을 트래킹 할 수 있다. 예로, activeElement는 유저의 인터렉션에 따라 계속해서 변화할 수 있는 값인데, live expression을 이용하면 실시간으로 변하는 값을 간단하게 확인할 수 있다. 필요에 따라 여러 개를 추가할 수 있다.

Command Menu

VS Code처럼 개발자 도구에서도 메뉴를 빠르게 찾거나 파일을 여는 걸 command menu를 통해 실행할 수 있다.

Command(Control) + Shift + P 명령어로 열 수 있다.

콘솔창을 여는 단축키는 Command(Control) + Option(alt) + J

콘솔창 설정

콘솔에 어떤 내용들을 출력할지도 설정할 수 있는데, 그 중 생소했던 것은 이렇다.

• eager evaluation: 콘솔창에 코드 입력 시 미리 실시간으로 결괏값을 띄워준다

Console Utilities API

• $_ : 직전에 나온 결과값을 반환
• $0 - $4 : 0부터 차례대로 최근에 inspect 한 dom element가 담겨있다.
• $(), $$() : 각각 document.querySelector, document.querySelectorAll
• debug(function) : 함수 내부로 진입해 디버깅이 가능해진다. undebug로 해제 가능.
• inspect() : 파라미터로 받은 내용에 따라 적절한 개발자 도구 탭을 열어준다. 엘리먼트면 엘리먼트 탭에서 해당 요소를 찾아서 보여준다
• getEventListeners(object) : 객체에 부착된 이벤트리스너를 받아온다
• monitor(function) : 파라미터로 받은 함수가 호출될 때마다 메시지가 로그에 찍힌다. unmonitor로 해제 가능.
• monitorEvents(object [, events]) : 객체의 특정 이벤트가 호출될 때마다 메시지가 로그에 찍힌다. unmonitorEvents로 해제 가능.
• queryObjects(Constructor) : 해당 생성자로 생성된 객체를 반환

•