TIL.42 개발자 도구 DevTools (wecode_5일차)

개발자 도구

개발자 도구는 브라우저에서 제공하는 하나의 도구(tool)이다.

개발자 도구를 이용해 즉각적으로 수정하고 문제 발생 시 원인을 파악하여 빠른 속도로 더 나은 사이트를 만들게 도와준다.

개발자 도구에는 여러 개의 Panel(teb)이 하는데 가장 자주 사용되는 Panel을 정리하여

상황에 맞는 panel을 찾아 사용하면 된다.

 

객체 : 

프로퍼티 : 

 

Console 패널

Console 패널의 기능

- 로그를 확인하고 스트립트 명령어를 입력하는 패널

- 중단점을 건 시점의 변수를 체크 할 수 있고, 값을 평가하거나 수정 할 수 있다.

- 실시간으로 자바스크립트를 즉시 실행하고 에러메세지 등을 출력해준다 (디버깅할때 자주 사용)

 

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

console.clear()

메소드를 사용하면 개발자 도구 콘솔 창의 로그를 모두 지울 수 있다.
이렇게 하면 이전에 인쇄 된 모든 메시지가 콘솔에서 제거되고 일부 환경에서는 “콘솔이 지워졌습니다“와 같은 메시지가 인쇄 될 수 있다.메소드 외의 방법들

• Clear Console 동그라미 엑스 버튼을 누른다
• Ctrl + L (맥에서는 Ctrl + L,  Command + K, 둘다 됨)

 

화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?

크롬의 개발자 도구에서는 console 옆 설정에서 "Preserve log"를 눌러주면 된다.

 

 

콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?

개발자 도구 console의 설정과 filter 사이에 있는 Log level에서 체크하거나 체크를 해제한다.

 

다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?

ESC를 누르면 다른 패널 사용중에도 console 사용 가능하다.