Console panel

과제 안내

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

개발자 도구란? 구글에서 만든 웹 브라우저인 크롬에는 개발을 도와주는 다양한 도구가 기본적으로 제공됩니다. 이를 개발자 도구라고 합니다. 개발자 도구를 이용하면 HTML,CSS,JavaScript의 생산성을 극대화 할 수 있습니다.

개발자 도구 여는 방법

1. command + option + I

2 .fn + F12

Console

로그 된 메시지 보기와 JavaScript 실행의 두 가지 용도로 주요 사용
에러메시지,status 코드도 콘솔을 통해 확인 가능
자바 스크립트가 돌아가는 환경 그대로인 화면. 자바스크립트를 입력하여 브라우저에서 바로바로 확인 가능하게 해준다.

새로고침시 Console 내용이 지워지지 않는 법

개발자 도구 > Settings > preserve log upon navigation 체크

Console에 기록된 로그를 모두 지울때 사용하는 메소드

• Console에 clear()를 입력

• command + k

• 툴바 Clear console 아이콘 클릭

• Ctrl+L (Mac, Windows, Linux)을 입력

• Console 창 내부를 우클릭하고 Clear console 클릭

• 자바스크립트 코드 내에서 console.clear()를 호출

Console에서 Warnigs, Errors 를 제외하고 보는 방법

툴바의 Log level에서 해당 항목을 체크 해제

다른 Panel에서 Console Panel을 같이 보는 방법

• 다른 패널 사용 중 Esc를 누른다.

• Customize and control DevTools 버튼을 누른
  다음 Show console drawer를 누른다.