📌 이 포스팅에서는 개발자 도구의 Elements panel, Console panel, Network panel, Application panel을 정리하였습니다.
🌈 About 개발자 도구
🔥 Elements panel
🔥 Console panel
🔥 Network panel
🔥 Application panel
1. Elements panel
🤔 Elements 패널의 기능은?
✔️ HTML 구조 및 CSS 스타일을 확인할 수 있는 패널로, 왼쪽에는 HTML 패널이있고, 오른쪽에는 CSS 패널이 있습니다. 이 레이아웃을 변경시킬 수 있습니다.
✔️ Elements 패널을 활용하면, 해당 페이지의 편집을 손쉽게 테스트 해볼 수 있습니다. 단, 개발자 도구에서 적용시킨 것들은 새로고침하면 사라집니다.
✔️ 또한 HTML Element를 손쉽게 찾을 수 있도록 selecte element 기능을 제공합니다.
🤔 Styles 부분의 순서가 의미하는 것은?
✔️ 선택자의 우선순위를 계산하여서 우선순위가 높은 것부터 위에서부터 차례대로 배치됩니다.
✔️ css 패널에서 가운데줄이 그어진 속성은 값은 적용했지만 우선 순위에 따라 반영되지 않는 스타일을 의미합니다.
🤔 user agent stylesheet 란?
✔️ 브라우저에서 적용시키는 default style로 브라우저마다 다릅니다.
✔️ 이에 "reset.css" 또는 "normalize.css" 등을 사용해 초기화 후 CSS를 적용시키는 것이 일반적입니다.
2. Console panel
🤔 preserve log 옵션
✔️ preserve 옵션을 체크하면 새로고침해도 console 내용이 지워지지않고 유지됩니다. 
🤔 Console Panel rest
✔️ command+r 또는 console.clear() 명령으로 콘솔 패널을 초기화 시킬 수 있습니다.
✔️ 단, preserve 옵션이 체크되어있으면 적용되지 않습니다.
🤔 console 명령어
✔️ console.error() : 에러 메세지 출력합니다.
✔️ console.warn() : 경고 메세지 출력합니다.
✔️ console.log() : js 디버깅시 및 백엔드에서 보내주는 response(error, status code etc.)를 확인이 가능합니다.
3. Network panel
🤔 Network panel란?
✔️ 웹 사이트에서 클라이언트와 서버가 통신하고 있는 모든 정보(name, status code, type, time 등..)가 표시됩니다.
✔️ 또한 이러한 통신의 결과들이 어떤 순서로 로딩이 되는지 시각화하여 확인할 수 있습니다.
🤔 status code
✔️ 상태코드는 클라이언트와 서버의 통신 결과를 숫자로 표현해서 알려줍니다. 이를 통해 통신에 문제가 없는지, 문제가 있다면 어떤 문제인지 파악할 수 있습니다.
🔎 1xx(Informational) : 클라이언트의 요청이 수신되어 처리 중, 실제 거의 사용되지 않음
🔎 2xx(Successful) : 클라이언트의 요청 정상 처리
🔎 3xx(Redirection) : 클라이언트의 요청을 완료하려면 추가 행동이 필요
🔎 4xx(Client Error) : 잘못된 문법 등으로 서버가 요청을 수행할 수 없음 👈 클라이언트 오류
🔎 5xx(Server Error) : 서버 내부의 문제로 서버가 요청을 처리하지 못함 👈 서버 오류
4. Application panel
🤔 Application panel 란?
✔️ 개발자 도구 내에서 저장소 역할을 담당하고 cookie, session 등과 관련한 정보를 확인할 수 있는 패널입니다.
🤔 Local Storage
✔️ 로컬 스토리지의 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있습니다. 즉 데이터의 영구성이 보장되고 도메인마다 로컬 스토리지가 마련되있습니다. Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회가 이루어집니다.
접근 방법 : window.localStorage
사용예제 : 지속적으로 필요한 데이터(자동 로그인 등), "이 창을 오늘 다시는 보지 않음" 체크 정보
🤔 Session Storage
✔️ 세션 스토리지의 데이터는 윈도우나 브라우저 탭을 닫을 경우 제거됩니다.쿠키보다 비교적 보안이 뛰어나 더 민감한 정보를 저장하고, 최소 저장한도는 5MB로 쿠기보다 큽니다. Windows 전역 객체의 sessionStorage라는 컬렉션을 통해 저장과 조회가 이루어집니다.
접근 방법 : window.sessionStorage
사용예제 : 잠깐 동안 필요한 정보(일회성 로그인 정보)
🤔 Cookie
✔️ 쿠키는 만료기한이 설정되어 있는 데이터 저장소입니다. 쿠키 데이터는 서버로 전송되기 때문에 하나의 도메인 페이지에서 최대 20개, 4KB의 용량제한이 있습니다. 또한 쿠키는 보안이 취약하기 때문에 중요하지 않은 정보를 저장할 때 사용하며, 빠른 처리가 필요한 임시 데이터들을 저장합니다.
저장하는 정보 : 예를들면 원래 페이지의 requirement, Ajax requests, 이미지, 사이트 스타일, 텍스트, 폰트.
🤔 Web Storage 간단 사용 방법
✔️ 데이터 저장
- localStorage.setItem("key", "value")
- sessionStorage.setItem("key", "value")
✔️ 데이터 접근
- localStorage.getItem("key")
- sessionStorage.getItem("key")
✔️ 기타 메소드
- removeItem, clear
- setcookie("key", "value", "지속시간 (초단위)")
