🙆♂️🙋♀️ Team Mission
🥨 프레즐팀 - Console panel
Console패널의 기능은?- 화면을 새로고침 해도
console내용이 지워지지 않고 남게 하는 방법은? - 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
- 콘솔에서
Warnings,Errors내용을 제외하고 보는 방법은? - 다른 패널(ex.
Elements panel)에서Console Panel같이 보는 방법은?
Material
# 개발자 도구란?
웹 사이트 오류 발생시 빠른 수정과 원인 파악이 가능한 도구
Console
Console 패널의 기능
로그 된 메시지 보기와 JavaScript 실행의 두 가지 용도로 주요 사용
자바스크립트가 돌아가는 환경 그대로인 부분으로써 개발 중 진단 정보를 남기고 페이지의 자바스크립트와 상호작용한다.
백엔드에서 보내주는 response(에러 메세지, status 코드)도 콘솔을 통해 확인 가능
새로고침시 Console의 내용이 지워지지 않는 법
개발자 도구 > Settings > Preserve log upon navigation 체크
Preserve log upon navigation체크시clear();코드가 작동하지 않는다.
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를 누른다.
Console 제외 주요 패널
Elements Pannel
- 페이지와 스타일 검사 및 편집
- CSS 스타일 수정
- 페이지의 이미지 확장자 (Gif, Jpg, Png...) 확인 가능
- 원하는 특정 요소의 이미지를 가져오고 싶을 때
- Select an element
Sources
- 자바스크립트 디버깅
- 어떤 에러가 났을 때 문제가 무엇인지 파악을 하고 수정하는 것을 '디버깅'이라고 한다.- 디버거를 걸어 한줄, 한줄 자바스크립트가 돌아가는 것을 볼 수 있다.
- 개발자의 코드가 브라우저에 전부 노출되어 정보를 가진
- 코드를 압축, 난독화하여 브라우저에 올린다.
- 그대로 올라와있는 사이트도 있다. ex) taling
Network Pannel
- 웹 사이트에서 호출되는 css, javascript, img 등의 정보를 확인할 수 있다.
- 'XHR' 프론트엔드, 백엔드에서 어떤 API에서 문제가 있는지 볼 수 있다.
- http 네트워크 통신 확인, 웹 사이트 속도 측정에도 쓰인다.
- 어떤 파일의 용량을 확인할 수 있다.
Application Pannel
- 브라우저의 저장소
- Local storage, Session Storage, Cookie
- Local storage
사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. - Session Storage
윈도우나 브라우저 탭을 닫을 경우 삭제된다. - Cookie
Performance, Memory
- 어떤 사이트의 퍼포먼스를 확인
- 어느 부분에서 버벅임이 있는지 어떤 파일이 문제인지 알 수 있다.
- 요새는 브라우저 성능이 좋아져 특정한 비즈니스가 아닌 이상 잘 안 본다.
Backend Developer