브라우저 개발자 도구 - Console 사용법

Console

오늘은 브라우저 개발자 도구 Console 에 대해서 알아보는 시간이다.

 

F12 를 누른 뒤에 Console 탭을 클릭하거나, Ctrl + Shift + J 단축키를 사용하여 콘솔창을 열 수 있다.

 

Console 창에서 가장 먼저 쉽게 할 수 있는 부분의 하단의 Console창에서 JavaScript 코드를 입력하고 실행할 수 있다.

변수를 선언하거나, document 객체를 통해서 웹 페이지의 DOM에 접근하여 조작하거나, $0, $1, $2, $3, $4, $_, $(), $$() 등을 이용해서 DOM 요소를 선택할 수도 있다!

$0 ~ $4 : 마지막으로 불러왔던 요소를 가져올 수 있다. (Elements 에서 선택한 요소도 포함한다.)

$() 와 $$() : CSS선택자를 사용하여 요소를 선택할 수 있다. $() 는 querySelector, $$() querySelectorAll과 같다.

$_ : 가장 마지막으로 사용했던 CSS 선택자나 평가식을 반환하다.

 

Console창에는 console 메시지가 뜬다. console.log() 함수를 사용하여 콘솔에 메시지를 출력할 수 있고, 이를 통해 변수의 값을 확인하거나 디버깅 정보를 기록할 수 있다.

 

이외에도 console.warn(), console.assert(), console.table() 등이 있는데 자세한 내용은 다음 링크에서 확인할 수 있다.

https://developer.mozilla.org/ko/docs/Web/API/console

console - Web API | MDN

Log 메시지를 Styling 할 수도 있는데 다음을 콘솔창에 입력해보자.

console.log(
  "This is %cMy stylish message",
  "color: yellow; font-style: italic; background-color: blue;padding: 2px",
);

console에서 사용할 수 있는 형식 지정자들은 다음 링크를 참고하자

https://console.spec.whatwg.org/#formatting-specifiers

Console Standard

 

Log 메시지들을 필터링 할 수도 있는데, 필터링 할 수 있는 방법이 여러 가지가 있다.

1. Level 별 필터링 

각 console.* 함수의 심각한 정도에 따라서 분류할 수 있는데  Verbose, Info, Warnings, Errors를 체크박스를 통해 필터링 할 수 있다.

2. text로 필터링

빨간 밑줄이 쳐진 텍스트 박스를 통해서 필터링 할 수 있다. 그리고 해당 텍스트 박스에 정규 표현식을 이용해서도 필터링할 수 있다.

정규표현식이 뭔 지 모른다면 다음 링크를 참고하자.

정규 표현식 - 위키백과

정규 표현식 - 위키백과, 우리 모두의 백과사전

3. 메시지 소스별 필터링

Show Console Sidebar 버튼 (아래 이미지의 빨간 네모로 강조한 버튼) 을 클릭하면 특정 URL에서 온 메시지만을 필터링해서 볼 수 있다.

Console창에서 copy(object) 함수를 사용하면 object를 클립보드에 복사할 수 있다.

우클릭으로도 복사할 수 있지만 마우스에 손을 가져다 대기 싫다면 copy(object)도 써볼 수 있다.

 

monitor(function) 함수를 사용하여 매개 변수로 지정된 function 이 실행될 때, 함수 이름과 호출될 때의 인수를 출력해 준다.

비슷한 함수로 monitorEvents(element, eventType)이 있는데, 이 함수를 사용하면 element에서 eventType에 해당되는 event 가 발생했을 때 알려준다.
unmonitorEvents(element)를 사용하여 모니터링을 중단할 수 있다.
그리고 getEventListener(element)를 사용하면 element에 열결되어있는 eventListner들을 볼 수 있다

 

이외에도 Console을 활용할 수 있는 방법은 다양하고, 웹 개발을 하면서 자주 쓰게 된다.

잘 활용해서 디버깅과 최적화를 해보자.