[TIL] 개발자 도구

박현희·2020년 9월 17일
1

Elements

  • Elements 패널의 기능은?
    👉🏽 페이지와 스타일 검사 및 편집 그리고 스타일 수정을 할 수 있게 도와주는 패널이다

  • 해당 페이지는 몇 개의 section 으로 이루어져있나요?
    👉🏽 5개

  • Instagram 피드의 가로 길이는?

  • Styles 부분의 순서가 의미하는 것은?
    👉🏽 CSS 파일의 입력 순서가 아닌 브라우저가 읽는 순서.
    예를 들면 id, class를 먼저 읽어, 순서의 위로 올라오게 된다.

  • user agent stylesheet 란?
    👉🏽 웹 브라우저 별로 해당 태그의 기본 속성값을 가지고 있는데 그것을 말한다.
    Reset도 가능하고 수정도 가능하지만 아무런 속성값을 주지 않으면 브라우저가 가지고 있는 값을 보여준다.

Console

  • Console 패널의 기능은?
    👉🏽 자바 스크립트가 돌아가는 환경 그대로인 화면. 자바스크립트를 입력하여 브라우저에서 바로바로 확인 가능하게 해준다.

  • 화면을 새로고침 해도 console 내용이 지워지지 않고 남게 하는 방법은?
    👉🏽 크롬의 개발자 도구에서는 console 옆 설정에서 "Preserve log"를 눌러주면 된다.

  • 콘솔에 기록된 로그를 모두 지울 때 사용하는 메소드는?
    👉🏽 console.clear

  • 콘솔에서 Warnings , Errors 내용을 제외하고 보는 방법은?
    👉🏽 개발자 도구 console의 설정과 filter 사이에 있는 Log level에서 체크하거나 체크를 해제한다.

  • 다른 패널(ex. Elements panel)에서 Console Panel 같이 보는 방법은?
    👉🏽 ESC를 누르면 다른 패널 사용중에도 console 사용 가능하다.

Network

  • Network 패널의 기능은?
    👉🏽 해당 웹사이트에서 통신하고 있는 모든 정보가 표시된다.
    무슨 요청으로 호출했고 응답은 어떻게 되고 있는지 확인 가능하다.

  • Network 패널의 여러 가지 탭의 종류와 기능 살펴보기
    👉🏽 XHR : Xml http Request =>프론트엔드에서 백엔드에 API 호출할때의 정보
    JS : 확장자가 js인

  • Market Kurly(마켓컬리) 카테고리 정보 가져오는 API 찾아보기

  • Tesla 홈페이지에서 신나게 달리는 자동차 동영상 url 가져오기

Application

  • Application 패널의 기능은?
    👉🏽 브라우저에서 저장할 많은 저장소들과 캐시, 스토리지들이 많이 있다. 로그인과 관련해서 유저 정보에 대한 부분에도 많은 부분을 차지하기 때문에 꼭 알아두어야 할 패널이다.

  • Local Storage, Session Storage, Cookie 차이점은?
    👉🏽 Storage : 브라우저의 저장소. Key-Value 페어 형태로 간단한 키와 값을 저장할 수 있다.
    👉🏽 Local Storage : 로컬스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아 있다. 즉, 데이터의 영구성이 보장된다.
    👉🏽 Session Storage : 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거된다.
    👉🏽 Cookie : 만료 기한이 있는 키-값 저장소다. 시간 제한이 설정되어 있는(저장 기간 설정 가능) 데이터 저장소이며, 쿠키는 프론트-백엔드 통신과 관련이 있기 때문에 용량이 작을 수 밖에 없다.

  • Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
    👉🏽 Local Storage : 보안이 중요한 영구 데이터 (자동 로그인). 영구적으로 저장되어도 상관 없는 데이터들
    👉🏽 Session Storage : 보안이 중요한 임시 데이터 (은행 로그인). 민감한 데이터.
    👉🏽 Cookie : 빠른 처리가 필요한 임시 데이터(광고 팝업)

  • Local Storage 에 특정 데이터를 저장하고 가져오는 방법
    👉🏽 세팅하는 법
    - localStorage.setItem("key", "value")
    - sessionStorage.setItem("key", "value")
    👉🏽스토리지 접근해서 값 가져오는 법
    - localStorage.getItem("key")
    - sessionStorage.getItem("key")

0개의 댓글