TIL: 크롬 개발자 도구 - console panel

• Console 패널의 기능은?
• 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
• 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
• 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
• 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?

크롬 개발자 도구는 f12 를 눌러 열 수 있다.
Document 의 element 를 볼 수 있고, source 파일을 열람 하고, console 패널 등의 기능이 있다.

여기서는 개발자 도구 창에서 console 패널을 알아본다.

console 패널의 기능

JS repl

ctrl+shift+ J 를 누르면 console 패널과 함께 개발자도구가 열린다.

console 는 아주 간단히 보자면 JavaScript 의 repl 이다.

JS 를 인터렉티브 셸처럼 작성할 수 있다.

console 패널의 내용을 지우려면 다음의 커맨드를 입력한다.

console.clear()

패널에서 왼쪽의 탭에서 원하는 정보를 필터하여 error만 보는등의 필터링이 가능하다.

아래와 같이 다른 패널(여기서는 Element)을 보는 중에도, esc 를 누르면 추가로 console 패널을 볼 수도 있다.

query selector

console 패널에서 query selector 로 오브젝트를 선택할 수 있다.

document.querySelector(object)

querySelector 메소드 말고, 콘솔 패널에서는 간단하게 마치 Jquery 처럼 보이는 $ 를 이용해서 간단히 선택 할 수도 있다.

$(object)

위의 두가지는 같은 커맨드 이다.