개발자 도구 : 팀별 과제

🥨 프레즐팀 - Console panel

• 화면을 새로고침 해도 콘솔이 지워지지 않고 남게 해주세요.
• console.log() / console.error() / console.warn()
• 콘솔에서 warn 내용만 제외하고 보는 방법
• 다른 패널(ex. Elements panel)에서 콘솔 패널 같이 보는 방법

1. 화면을 새로고침 해도 콘솔이 지워지지 않고 남게 해주세요.

크롬 개발자 도구 우측 상단의 톱니바퀴(설정) 클릭하여 'preserve log' 체크 설정 시 브라우저 새로고침하여도 콘솔 로그 보존

기록 유지

콘솔 맨 위에 있는 Preserve log 확인란을 활성화하여 페이지 새로고침 또는 변경 사이에 콘솔 기록을 유지합니다. Console을 지우거나 해당 탭을 닫을 때까지 메시지가 저장됩니다.

 

2. console.log() / console.error() / console.warn()

console.log () : 브라우저 내의 콘솔 창에서 출력되는 메시지를 작성하는 함수. 브라우저의 실제 화면에는 아무것도 표시되지 않으며, 자바스크립트 코드의 디버깅에 활용한다.

console.error() : 콘솔 창에 에러 메시지를 출력될 수 있게 하는 함수. 에러를 인위적으로 생성하여 테스트해볼 때 활용할 수 있다.

console.warn() : 콘솔 창에 경고 메시지를 출력할 수 있게 하는 함수.

 

3. 콘솔에서 warn 내용만 제외하고 보는 방법

filter 창에서 warning만 체크 해제

 

4. 다른 패널(ex. Elements panel)에서 콘솔 패널 같이 보는 방법

개발자 도구 연 상태에서 esc