[Trouble Shoot] 개발자 도구 알아보기

1. 개발자 도구란?

• 브라우저에서 제공하는 도구
• 프론트앤드 개발을 하면서 프론트 앤드를 개발하는데 도움이 될만한 여러가지 기능들을 제공
• 웹사이트 디버깅을 할 때 사용

디버깅(debugging)
문제를 캐치하고 문제의 원인을 파악하여 수정하는 것

---

2. 개발자 도구 실행 방법

1. f12 누르기
2. 우클릭 → 검사
3. ctrl + shift + i

개발자 도구 창

---

3. 패널(panel)

개발자 도구 패널에는 아래 리스트와 같은 것들이 있다.

• Elements
• Console
• Sources
• Network
• Performance
• Memory
• Application
• Security
• Lighthouse
• Recorder
• Performance insights

* 빨간색 패널은 자주 쓰이는 패널

---

1) Elements

Element 패널은 html 코드를 분석하고 수정할 수 있는 도구 패널이며, Dom과 css를 자유롭게 조작하여 사이트의 레이아웃과 디자인을 테스트 할 수 있습니다.

 

Element 패널은 크게 4가지의 작업이 가능

• 페이지 검사
• 스타일 수정
• DOM 수정
• 애니메이션 검사

Styles

HTML이 실행되었을때 가장 먼저 적용되는 순서대로 배치가 되어있음.
개발자가 기록한 CSS와는 순서가 다르며, 가장 상위태그인 html(inline style), ID, CLASS, TAG 순서대로 배치\

Computed

Computed는 태그의 부모와 자식 간의 관계나 우선순위를 통해 최종적으로 선택된 CSS가 표시

---

2) Console

• 자바스크립트 코드 즉시 실행

• 웹페이지에서 발생하는 메시지를 확인할 수 있음, 에러를 확인하거나 console.log 메서드의 실행 결과를 확인하는데 쓰임(디버깅)

---

3) Network

• http 네트워크 통신 확인
• API 크롤링, 페이지 로딩 성능 테스트
• 이미지, 영상 등의 소스 (mock data 활용)

네트워크 패널의 기능과 parts의 표시, 비표시

로드되고 있는 페이지를 요청하는 타임라인을 표시

로드되고 있는 페이지의 요청정보를 표시하는 테이블

총 요청수, 전송 데이터의 양, 로드 시간

---

4) Source

• 로딩된 페이지의 자바스크립트 코드를 디버깅할 수 있음

---

5) Application

• 브라우저 저장소
• web(Local) storage, Session, Cookie

Cookies

• 클라이언트가 서버에 문한 정보를 클라이언트 단에 저장하는 작은 파일
• 매번 서버에 전송이 되므로 크기가 클 경우 서버에 부담이 갈 수 있음
• 대력 4KB까지의 데이터를 저장할 수 있으며 유효기간이 존재

Web Storage

• HTML5부터 추가된 저장소
• 쿠키와 달리 서버에 전송되지 않아 서버에 부담이 가지 않으며 로컬 스토리지와 세션 스토리지로 나뉨, 이 둘의 차이점은 데이터의 영구성
• 지속적으로 필요한 정보는 로컬스토리지에(자동로그인 등), 일시적으로 필요한 정보는 세션스토리지에 저장하기 좋음(입력 폼 저장 등)

Local Storage

• 사용자가 직접 지우지 않는 이상 데이터가 영구적으로 남아있음
• 도메인별로 생성되며, 다른 도메인의 로컬 스토리지에는 접근이 불가능
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용

Session Storage

• 브라우저를 닫을 시 데이터가 삭제
• 동일한 탭이라도 다른 도메인이라면 또 다른 세션 스토리지가 생성
• 서로 다른 세션 스토리지는 서로 영향을 주지 않으며 독립적으로 작동

데이터를 저장하는 방법

• localStorage.setItem('key', 'value')
• sessionStorage.setItem('key', 'value')
• setcookie('key', 'value', '지속시간(초단위)')

데이터를 가져오는 방법

• localStorge.getItem('key')
• sessionStorage.getItem('key')
• document.cookie

 

참조:

https://velog.io/@niboo/TIL-%EA%B0%9C%EB%B0%9C%EC%9E%90-%EB%8F%84%EA%B5%AC-Elements-Console-Sources-Network-Application