TIL(4) - 개발자도구

🍩 도너츠팀 - Elements panel

• Elements 패널의 기능은?
  : 웹 페이지의 구성을 보여주는 것
• 해당 페이지는 몇 개의 section 으로 이루어져있나요?
• Instagram 피드의 가로 길이는?
• Styles 부분의 순서가 의미하는 것은?
  -> style CSS에서 꾸며준 것들을 볼 수 있다. 실행 우선순위 순서로 보여진다.
• user agent stylesheet 란?
  -> Reset CSS 기본적으로 적용이 되는 스타일을 리셋시켜서 작성한 코드대로 구현되도록 하는 것.

🥨 프레즐팀 - Console panel

• Console 패널의 기능은?
  : 브라우저에서 간단한 스크립트 코드를 test를 할 수 있다.
  -> console.log() 확인하고 싶은 출력값을 써 디버깅(= 요청이 제대로 이루어지는지 확인)할 때 사용한다.
• 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
  -> 설정에서 preserve log upon navigation
• 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
  -> clear() / Ctrl+l
• 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
  -> Default levels에서 Warnings/Errors 선택
• 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?
  -> esc를 누른다.

🥖 바게트팀 - Network panel

• Network 패널의 기능은?
  : 실제로 업로드/다운로드 되고 있는지 확인해야 할 경우, 개발자 도구가 열려있는 동안의 네트워크 요청을 기록한다.
  -> 네트워크 문제 또는 최적화 기회를 탐지하기 위해 사용한다.
• Network 패널의 여러 가지 탭의 종류와 기능 살펴보기
  -> resource의 유형, 요청을 발생시킨 소스코드, 크기, 로드시간과 같은 속성을 확인할 수 있다.
  -> 속성값은 필터를 이용하여 필요한 속성값만 따로모아 확인할 수 있다.
• Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기
  -> HTML에 직접 입력하지 않고, 백엔드 서버에서 카테고리 정보를 받아와서 자바스크립트로 나타낸다.
  -> XHR 필터에 카테고리 Network에서 API 주소를 얻을 수 있다.
• Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기
  -> 네트워크 로그는 요청 순서내로 나열되기 때문에 자동차 영상을 보는 순간 새로 받은 요청을 media 필터에서 확인할 수 있다.

🍰 케이크팀 - Application panel

• Application 패널의 기능은?
  : 작은 정보를 저장하는 수단. 보안에 취약하기 때문에 개인정보는 저장하지 않는 것이 좋다.
• Local Storage, Session Storage, Cookie 차이점은?
• Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
  Local Storage
  : 최대 10MB 브라우저에 저장. 삭제를 하지 않으면 계속 저장된다. ex) 자동로그인. 지속적으로 저장이 필요한 정보
  Session Storage
  : 최대 10MB 브라우저에 저장. 탭을 종료하는 순간 사라진다. ex) 은행로그인. 보안이 필요한 정보
  Cookie
  : 쿠키를 불러올 때 전부다 불러와서 효율적이지 않는다. 4KB 서버에 저장. 유효기간을 정해줄 수 있다. ex) 7일동안 창을 띄우지 않음. 서비스 약관 동의.
• Local Storage 에 특정 데이터를 저장하고 가져오는 방법
  -> localStorage.setItem