프론트앤드 활용할 때 도움준다.

• 개발자 도구는 화면에 나오는 웹페이지를 분석하고 테스트할 때 사용하는 툴이다.
  need to know

패널의 종류와 기능

Need to know

• Elements 패널을 통해 웹 페이지 구성과 구성 요소들의 스타일을 확인할 수 있다.
• Console 패널을 통해 자바스크립트 코드를 브라우저에서 즉시 실행할 수 있다.
• Network 패널을 통해 네트워크 상으로 주고 받는 데이터를 확인할 수 있다.
• Application 패널을 통해 브라우저의 저장소에 담긴 데이터를 확인할 수 있다.

Elements 패널

• 페이지와 스타일(CSS) 검사 및 편집
  -> 스타일을 수정할 수 있다는 말이당

Elements안에 \
HTML tag 확인 가능
웹사이트 내부의 이미지를 따고싶은데 어디에 쓰였는지 넘 많아 서 모르겠다 . .?
-> 셀렉트 알리먼트(왼쪽 위)를 클릭 후 따오고싶은 이미지 요소에 가져다가 대면 -> 이게 어디쪽에서 쓰였는지 나타내 줌

• 그런 후 src에서 경로 복사한후 -> 현재 웹사이트 url을 유지하고 바로뒤에 복사한 경로를 붙혀넣기 하면 이미지 따올 수있다.

• CSS 바로 수정도 가능하다

  • 픽셀 수정되는거 바로 확인 가능
  • 개발자 도구 수정해서 바뀌는거 확인 후 어떤게 괜찮은지 보고 진짜 바꿔준당

console 패널

• 자바 스크립트 돌아가는 환경 그대로 된다.

• 자바스크립트 테스트 할수있음

• 자바스크립트 공부하다가 해보고 싶은 내용있으면 콘솔 패널 들어가서 바로 해보면 된당 clear console로 지울수 있다.

• 자바스크립트 함수 할 때 그냥 엔터를 치면 안내려가고, 시프트 엔터 쳐야한당

Source

• 데이터가 전부 노출 되기 때문에 조심해야하고 다 줄여놔야한다
• 디 버깅 작업 할 때 필요하다
  • 어떤 에러가 났을 때 문제가 무었인지 확인하고 해결하는 것
    • 디버거를 걸어서 한줄한줄 자바스크립트 돌아가는것을 확인할수 있따.

Network

• 네이버를 켰을때
  • 네이버 첫 페이지가 호출할 때 필요한 모든 호출이 보여주고,
  • 무슨 요청으로 호출했고, 어떻게 왔는지
• 응답을 제대로 왔는지 프리뷰 가서 아 얘가 뭐다
• all은 이미지, CSS 등 모든거 볼수 있고
• 여기 카테고리 가서 보면 잘 잘 볼 수 있따 .

Application

• Application 패널의 기능은?
  • 브라우저 저장소
  • 클라이언트(유저) 사이드의 스토리지
  • 서버와 관계는 없다
  • 유저가 브라우저를 사용하면서 적는(기록하는) non-sensitive data를 저장하는 곳입니다.
  • 현재 로딩된 웹 페이지에서 사용된 리소스(이미지, 스크립트, 데이터)를 열람할 수 있는 패널입니다.
  • 웹 SQL 데이터베이스, 로컬 및 세션 스토리지, 쿠키, 어플리케이션 캐시, 폰트, 스타일시트를 포함한 로딩된 모든 리소스를 검사합니다.

• ex) preferences, scores in games
• Local Storage, Session Storage, Cookie 차이점은?
  • Local Storage와 Session Storage는 Web Storage로 지속성에서 차이가 있다.

• Local Storage
  • KVP : Key Value Pair(키 - 값 쌍의 형태로 로컬스토리지에 저장된다. (객체))
  • 지속적으로 필요한 데이터(data persistant)(ex. ID 저장, 비회원 카트)
  • Local Storage는 한번 저장하면 명시적으로 지우지 않는 이상 영구적으로 보관되면서 도메인마다 별도로 Local Storage가 생성됩니다.
  • UI 정보들(ex. 에어비앤비, 스카이스캐너 인천공항 - 베네치아 검색하면 그대로 유지)
• Session Storage :
  • 잠깐 동안 필요한 정보
  • 반대로 지속적으로 보관되지않고, 현재 페이지가 브라우징되고 있는 내에서만 데이터가 유지됩니다.
  • 즉, 브라우저가 종료되면 Session Storage도 삭제된다.
  • ex. 보안이 중요한 정보 (ex. 은행 사이트), specific한 유저 정보, 언어 선택
• Cookie
  • Cookie는 서버와 연동되어 만료 기한이 있는 Key-Value저장소이다. Cookie는 4kb으로 용량이 제한되어 있습니다.
  • 서비스 직접적이지 않은 데이터
  • 오늘만 하는 이벤트 팝업, 서비스 약관에 동의했는지 등.
• Local Storage, Session Storage, Cookie 사용 예시 - 어떤 데이터를 어디에 저장하면 좋을까?
• Local Storage 에 특정 데이터를 저장하고 가져오는 방법